Next.js - 이미지 넣는 법

첫번째 방법은 public 폴더 안에 이미지를 저장하고 <img src="/이미지.png" /> 로 불러오면 되는데,

lazy loading, 사이즈 최적화, layout shift를 방지하기 위해 Image 컴포넌트를 import 해서 사용할 수도 있다 !

그러기 위해선 이미지 경로를 무조건 import해와야 하는 조건이 있다.

 

사용은 <img>태그 대신 <Image>로. src 경로를 일일이 import해 {  } 안에 작성

 

---

단점 

반복문 안에서 각각 다른 이미지를 불러와야하거나, 외부사이트에 있는 이미지를 넣을 때는 불편함.

외부이미지는 src="경로" 속성 외에 width={  }, height={  } 도 필요하고 

 

 

그냥 이번거는 map으로 item 하나씩 불러오자.

  {
            item.map((e, i) => {
                return (
                    <div className="item" key={i}>
                        <img src={`food${i}.png`} className="item-img"></img>
                        <h4>{e}</h4>
                    </div>
                )
            })
        }