-
NextJS Image Tag Error: Invalid src prop 해결하기Next.js 2021. 9. 6. 16:02728x90
해당 에러는 NextJS의 이미지를 태그를 이용해 외부 링크의 이미지를 불러오려고 하면 발생하는 에러이다.
이 에러는 생각보다 간단하게 해결할 수 있다.
// next.config.js module.exports = { images: { domains: ['firebasestorage.googleapis.com'], }, }
나의 경우 firebase의 storage를 이용하기에 해당 도메인을 입력해 줬는데 다른 링크의 주소에서 가져온다면 해당 링크의 주소를 입력해주면 된다.
주의해야 할 점을 몇 가지 쓰자면
- next.config.js에 다른 요소들도 추가 설정을 했을 때 웬만하면 가장 먼저 images 설정을 하지 않으면 인식하지 못하는 문제가 발생했다.
- images에 여러 옵션이 있는데, 그 중 loader옵션을 사용할 경우 domains옵션을 무시한다.
- loader옵션을 사용할 경우 path옵션을 사용해 불러오려는 이미지 주소의 접두사를 써줘야 한다.
'Next.js' 카테고리의 다른 글
NextJS Image에서 fallback 활용하기 (0) 2021.09.16 NextJS Firebase@9으로 migration하기 (0) 2021.09.14 NextJS 외부라이브러리 Error : document(or window) is not defined 해결하기 (0) 2021.09.06 NextJS 11버전에서 next Image 태그 사용하기 (0) 2021.08.09 NextJS에서 antd less파일 이용하기 (0) 2021.07.27