Nextjs Image 컴포넌트

 <div className='card-contents'>
            {!card.title_image && !card.title3_img && !card.title2_img && !card.title1_img ? (
                            <Image width={150} height={100} src="/assets/img/no-image.png" alt="no-image" />
                        ) : (
                            <>
                                {card.title_image && (
                                    <Image width={150} height={100} src={card.title_image} alt="title image" />
                                )}
                                {!card.title_image && card.title3_img && (
                                    <Image width={150} height={100} src={card.title3_img} alt="title3 image" />
                                )}
                                {!card.title_image && !card.title3_img && card.title2_img && (
                                    <Image width={150} height={100} src={card.title2_img} alt="title2 image" />
                                )}
                                {!card.title_image && !card.title3_img && !card.title2_img && card.title1_img && (
                                    <Image width={150} height={100} src={card.title1_img} alt="title1 image" />
                                )}
                            </>
                        )}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        appDir: true,
      },
      reactStrictMode: false,
      images: { 
        domains: [' #### domain url#### '], 
        formats: [
           'image/webp','image/avif'],
       }
}
module.exports = nextConfig