ImageUpload.4.(NextJS Image)

들어가기
원래 JS는 이미지를 불러올때, <img src={} ~>로 불러오나,
NextJS에는 <Image src={} , 그외 옵션 />으로
이미지를 로드한다.
이번 POST에서는 NextJS의 이미지 로드에 대해서 자세하게 알아보자!!

https://nextjs.org/docs/basic-features/image-optimization
https://nextjs.org/docs/api-reference/next/image
https://github.com/vercel/next.js/tree/canary/examples/image-component
https://nextjs.org/showcase

1. next.config.js

여기에 어디 server로 UPload되는지 domain을 알려주어야 함.

/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['imagedelivery.net'],
  },
}

domain 주소는

src={https://imagedelivery.net/9VhLr461mPKMhcmTPOPfGg/${data?.product?.user?.avatar}/appleavatar}

CF 대쉬보드에서 받은 이미지배달URL임.(즉, imagedelivery.net)

사용방법.

1. Local Image 예시.

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

2. Remote Image 예시.

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

layout='' option, object-cover등등은
공식문서를 보고 여러가지로 try해본다.
일단은 그냥 넘어감...