Next.js에서 Image컴포넌트가 적용되지 않습니다..

이렇게 Next.js에서 이미지를 알아서 최적화해주는 Image컴포넌트를 사용하려고 했습니다.

근데 아래와 같이 이미지가 나오지 않습니다.

 

 

 

원인은 아마 이미지URL에 있을 것 같은데요.

저 src 안에 있는 profile을 콘솔로 출력하면 주소는 다음과 같습니다.

popfile: 'http://www.animal.go.kr/files/shelter/2023/03/202304012104101.jpg';

URL에 실제 들어가보면 이미지는 잘 나옵니다.

이미지를 가지고 오는 과정에서 문제가 생기는 것 같아요.

 

혹시몰라 http를 https로 바꿔주고 하드코딩 했는데 아래와 같은 에러가 뜨네요.

 

저 빨간 문구를 눌러보니 이런 화면이 뜹니다.

 

아~~컨피그에 등록을 해줘야되는군요.

아래 코드를 next.config.js 파일에 추가해줬습니다.

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'www.animal.go.kr',
        port: '',
        pathname: '/files/shelter/**',
      },
    ],
  },
};

 

근데도 동일한 에러..

서버를 껐다켜도 동일합니다.

도대체 왜이러는걸까요?  모르겠습니다...ㅠㅠ

 

 

----------------------------------------

진심 바보같은짓을 했습니다.

next.config.js의 코드가 잘못된것..

원래 아래와 같이 작성했었거든요.

 

nextConfig랑 module이 두번 적혀있어서 제가 적은 이미지 관련 코드는 적용이 안된것이였습니다;;

그래서 이렇게 바꿔줬습니다.

const path = require('path'); // 1. path 선언

const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')], // 2. sassOptions 옵션 추가
  },
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'www.animal.go.kr',
        port: '',
        pathname: '/files/shelter/**',
      },
    ],
  },
};

module.exports = nextConfig;

 

하..드디어 이쁜이들의 얼굴이 보입니다.

 

 

그리고 그냥 img 태그를 썼을 때와 한번 비교해보았습니다.

 

Image 컴포넌트 사용 시

 

img 태그 사용 시

 

와.. 크기가 10분의 1이 되었네요. 

Next는 아주 좋은 프레임워크인 것 같습니다..!

이제 사용하는 방법도 알았다, 이런 실수가 두번은 없어야 할 것 같네요 ^^ 3시간동안 헤맴..