[Next] Image hostname Error

 

 

💡 Image 컴포넌트에서 만난 오류..

 

db.json

  "companyInfo": {
    "name": "aotoyae's todo-list",
    "desctiption": "Next-todo-list Project Copyright 2024. aotoyae all rights reserved.",
    "image": "https://i.namu.wiki/i/d1A_wD4kuLHmOOFqJdVlOXVt1TWA9NfNt_HA0CS0Y_N0zayUAX8olMuv7odG2FiDLDQZIRBqbPQwBSArXfEJlQ.webp"
  },

 

AboutPage.json

import Image from 'next/image';

const AboutPage = async () => {
  const response = await fetch('http://localhost:4000/companyInfo', {
    cache: 'force-cache',
  });
  const { name, desctiption, image } = await response.json();

  return (
    <div>
      <h1>about</h1>
      <Image src={image} alt="company image" width={400} height={400} />
      <h2>{name}</h2>
      <p>{desctiption}</p>
    </div>
  );
};

 

db 에 있는 이미지를 가져오는데.. 아래처럼 에러가 뜬다.

hostname 이 next.config.js 에 없다고..

 

준 링크로 들어가보면..!

next/image 는 외부 이미지를 로드할 때 src 주소를 서버로 지정하면

config 파일에 remotePatterns 프로퍼티를 구성해줘야 하는데,

이는 악의적인 사용자로부터 내 앱을 보호하기 위함이라고 한다! 👀

 

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'i.namu.wiki',
      },
    ],
  },
};

export default nextConfig;

 

내 이미지 주소대로 파일을 수정하니 이미지가 잘 나타났다!

 

 

 

🔗 https://velog.io/@acwell94/next.js-%EC%99%B8%EB%B6%80-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B6%88%EB%9F%AC%EC%98%A4%EB%8A%94-%EB%B0%A9%EB%B2%95

[next.js] 외부 이미지 불러오는 방법

🔗 https://nextjs.org/docs/messages/next-image-unconfigured-host

`next/image` Un-configured Host