Next.js #Image src - External CDN image is not visible

Next.js <Image /> src 에 외부 CDN(External) 정보를 넣으니 이미지 출력이 안되었다.

출력 방법은 간단하다. Image loader 를 사용하면 된다.

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

https://nextjs.org/docs/api-reference/next/image#loader

next/image | Next.js

 

악의적인 사용자로부터 애플리케이션을 보호하고 싶다면 remotePatterns도 공식 문서를 참고하여 작성해주도록 하자.

https://nextjs.org/docs/api-reference/next/image#remote-patterns

next/image | Next.js