ERROR CODE

<img { src=("./cat.jpg") } alt="profile" />

result :

Cause

create-react-app과 같이 핫 모듈 로딩을 제공하는 웹팩(webpack) 을 사용하는 경우 발생하는 문제이다.

Solution

웹팩을 사용하는 경우 이미지 디렉토리와 링크하기 위해, require() 혹은 import를 사용해준다.

require( ) - case1

<img src = { require("./cat.jpg") } alt="profile" />

정상출력

require( ) & default - case2

<img src = { require("./cat.jpg").default } alt="profile" />

정상출력

import - BEST CASE

import icon from './images/icon.png' 
  .
<img src={icon} alt="icon" />

정상출력

BEST ?

import로 모듈을 불러올 때 사용하지 않는 코드라인들은 빌드가 진행될 때, 웹팩의 tree shaking에 의해 제거된다. 결과적으로 코드가 줄어들고 성능이 개선된다.

반면 require()를 사용하는 경우, 모듈을 동적으로 불러올 수는 있지만 불필요한 코드까지 포함하게 된다.

따라서 import 모듈 사용이 권장된다.

---

REF :

https://stackoverflow.com/questions/62244118/require-local-image-in-react