리액트에서 이미지 가져오기[20221005 TIL]

과제를 하던 중 리액트에서 이미지를 가져오던 중 문제가 생겼다.

 

문제가 뭔데?

리액트 이미지 로드 문제

내가 알던  

<Img src="상대경로" alt="..." /> 

이런 식으로는 되지 않아서

 

import mug from '../assets/madeleineMug.jpeg';

 

이렇게 객체로 임포트를 한 후 

 

<img src={mug} alt="product" />

하니까 된다.

 

근데 내 문제는 이게 아니었는데 

 

링크나 url path 에 변수를 넣어주듯 이미지 소스에도 변수를 넣어서 mapping 으로 풀어서 여러 이미지를 하나의 코드로 구현하고 싶었는데 잘 안된다.

아직 해결은 못했지만 얻은 팁은

 

꼭 하나의 방법에 집착하지말기

트레이너 분이 이미지파일들을 다른 곳에 저장해두고 객체로 불러오거나 등등 여러 방법을 간략히 알려주면서 코딩에서 하나의 방법이 막혔을땐 그것에 집착하지말고 어떻게 다른 식으로 해결할 수 있는짚 접근하는 사고가 중요하다고 했다.

 

액션플랜

이미지 어떻게 해결해서 다음 티아이엘로 돌아오기