관리 메뉴

프론트엔드 정복하기

React에서 img 태그 src 추가하기 본문

React/html요소 관리

React에서 img 태그 src 추가하기

GROWNFRESH 2020. 6. 23. 17:10

 

1. import 하기

  1) import  imgA  from <이미지 경로>

  2) <img src={  imgA  }/>

 

2. require로 불러오기

  1) <img src={ require ( './images/testA.png' ) } />

     : import 하지 않아도 됨.

     ** src 외부 파일에서는 require할 수 없다.

 

3. URL 작성

  src = "http://localhost:3000/img/...."

 

4. public에서 손쉽게 불러오기

   // public/img/ 이미지들...

  1) <img src="/img/logo.png"/>

       (src에서 불러올 때는 ./로 시작, public에서 불러올 때는 '/' 슬래쉬 하나면 되는 듯 하다.)

 

 

참고 사이트

https://webisfree.com/2019-12-12/[react]-img-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

 

https://writingdeveloper.tistory.com/301

 

'React > html요소 관리' 카테고리의 다른 글

여러 개의 checkbox 관리하는 법 (+여러개 input 관리법)  (0) 2021.03.12
React에서 checkbox 관리하기  (0) 2020.06.29
React와 Form  (0) 2020.06.29