외부 URL 이미지를 가져오는 방법

생성 일시

Dec 26, 2024 03:44 AM


import Image from 'next/image';

export default function ExternalImage() {
  return (
    <div>
      <h1>External Image</h1>
      <Image
        src="https://example.com/account123/image.jpg"
        alt="Example Image"
        width={500}
        height={300}
      />
    </div>
  );
}

src="https://example.com/account123/image.jpg" 가 가능하려면 ?

⇒ 기본적으로 외부 도메인에서 이미지를 로드하려면 보안 및 최적화를 위해 next.config.js 파일에서 해당 도메인을 허용해야함!

허용 방법

next.config.js 파일에서 remotePatterns(13 이상)에 url 등록하기!


//mjs
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**', // /account123/ 이하의 모든 경로 허용
      },
    ],
  },
};

//js
const nextConfig = {
	...
};

export default nextConfig;