리액트.... 이미지가 액박이 뜬다고?

결론: 응 원래 하던대로 하는거 아니야

 

사건의 발단

 

리액트를 배우기 시작하고 컴포넌트들을 만들어보다가, 이미지를 추가했다.

<img src='./Ellipse1.svg' style={styles.image} alt='유저 프로필 사진' />

음 안되네.

음..맞는데? 파일경로 파일이름 다 맞는데? 

아~ 리액트에서는 파일경로도 중괄호 안에 넣나보다~

 

<img src={'./Ellipse1.svg'} style={styles.image} alt='유저 프로필 사진' />

응 아니야.

 

검색해보니 create-react-app과같이 핫 모듈 로딩을 제공하는 웹팩을 사용하는 경우에는 이미지를 불러오는 방법이 달랐던 것! 

 

웹팩을 사용하고 JSX문법을 사용하는 경우에는 아래처럼 두가지 경우로 이미지를 불러올 수 있다.

 

---

해결방법

 

require('image').default 사용하기

 

검색에서는 뒤에 .default를 붙이지 않아도 잘 불러오는 것 같았는데, 나의 경우에는 .default를 붙여야만 불러왔고 그렇지 않은 경우에는 엑박이 나왔다.

<img src= {require('./Ellipse1.svg').default} />

 

import해서 사용하기

파일 최상단에 사용하는 이미지를 import해서 사용한다.

//최상단에서 import
import image from './Ellipse1.svg';

//필요한곳에 넣기
<img src={image} style={styles.image} alt='유저 프로필 사진' />

꺄 잘된다!

 

매일매일이 새로운 리액트!