이미지 최적화 질문있습니다.

[정중식]

import Image from 'next/image';
import food0 from '/public/food0.png';
import food1 from '/public/food1.png';
import food2 from '/public/food2.png';
 
      {products.map((product, index) => (
        <div className='food' key={index}>
          <Image src={food[index]} width='500' height='500' />

혹은 

          <Image src={`food${index}`} width='500' height='500' />
 

          <h4>{product} $40</h4>
        </div>
      ))}

이렇게하면 에러를 내던데.. 무조건 food0 혹은 food1 food2 따로따로 써주는 수 밖에없나요?
map을 이용해서 이미지를 불러오고싶으면서 Image로 이미지 최적화를 해주고싶을 경우 어떤 방법이있을까요?..

[codingapple]

src 안에 require('이미지경로') 쓰면 될 수도요

[글쓴이]

글