[ERROR] Error: Invalid src prop "" on `next/image`

 

---

외부에서 이미지 파일을 불러왔을 때 발생하는 에러.

---

next.config.js에서 설정하면 된다.

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['cdn.pixabay.com'] // 이곳에 에러에서 hostname 다음 따옴표에 오는 링크를 적으면 된다.
  }
}

그리고 next.config 파일을 수정했기 때문에 서버를 껐다가 다시 켜야 된다.

이 에러는 width, height값이나 layout='fill' 값을 설정 해 주어야 한다는 것이다.

width, height 값은 만약 이미지의 비율 값과 같게 넣게 된다면, layout='responsive'를 줬을 때 비율에 맞게 줄어들고 늘어나게 된다.