[Next.js] 외부 이미지 사이즈 지정하기

 

 

외부 이미지를 불러오는 경우, 정확한 width와 height 값을 알 수 없을 때, Image의 fill 속성을 이용하면 된다.

fill={true} // {true} | {false}

 

 

 

해당 이미지의 사이즈는 부모 사이즈로 결정되며, 아래와 같이 사용할 수 있다.

import Image from "next/image";

export default function Home() {
  return (
    <>
      <main>Hello world!</main>
      <figure style={{ position: 'relative', width: '500px', height: '100px' }}>
        <Image 
          src="https://example.com/example.jpg"
          alt="example image"
          fill
          style={{objectFit: 'cover'}}
        />
       <figcaption>example image</figcaption>
      </figure>
    </>
  );
}

 

 

 

추가로 외부링크를 소스로 넣을 때 외부 링크를 사용할 수 없다는 에러메세지를 볼 수 있다.

이것은 보안을 위해 허용된 도메인만 접근할 수 있게 막아둔 것 이며 next.config.js에서 다음과 같이 설정해주어야 접근이 가능하다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  }
};

export default nextConfig;

 

만약 도메인이 아닌 pathname까지 지정해 좀 더 정확하게 지정하고 싶다면 remotePatterns를 권장한다.