[React] 이미지 태그 동적 경로 추가 src require

Today, What I learned?

마이페이지의 UI가 꽤.. 변경이 되었다. 기존과 다르게 기술 스택별 이미지를 추가해야 하는데,

일일이 import 해올 수는 없으니..

동적으로 이미지 경로를 지정하는 방법에 대해서 찾아보게 되었다.

엑스박스를 보고 팀원분이 require라는 힌트를 주셨다.

 

 

기존 상태

각각 기술 스택에 해당하는 아이콘 이미지 적용을 위해 아래와 같이 코드를 작성했다.

 <SkillIcon
            src={`assets/images/icon_skills/icon_skill_${name.toLowerCase()}.jpg`}
            alt={name}
  />

 

하지만 모조리 엑박 ㅠ...

 

 

require() 적용

require를 아래와 같이 적용해보았을 때,

 <SkillIcon
            src={require(`../../assets/images/icon_skills/icon_skill_${name.toLowerCase()}.jpg`)}
            alt={name}
 />

 

이미지가 잘 뜨는 것을 볼 수 있다.

 

 

블로그들을 보다보니 .default를 붙여야 엑박이 안 뜨는 경우가 또 있던데, 나 같은 경우는 오히려 붙이니까 엑박이 떴다.

케이스 바이 케이스인지 모르겠지만? require만 사용하면 객체가 리턴된다고 한다. .default를 붙여야만 문자열로 인식을 할 수 있다.

 

 

 

아무튼 이렇게 아이콘 이미지 추가를 완료했다.