React 에서 이미지 가져오기(img태그)

1. 외부링크 방식

• HTML 방식과 동일하다

return (
    <div>
        <p>외부링크 방식</p>
        <img src='외부링크' width='300px'></img>
    </div>
  )

 

 

 

1. 내부 링크 방식

• 내부 링크 src 방식
  • src 폴더 이용하기
  • import 이미지 변수 from '경로'
  • <img src = {이미지변수}>

import 내부링크변수 from '링크주소'

/* 중략 */

return (
    <div>
        <p>내부 링크 src 방식</p>
        <img src={내부링크변수} width='300px'></img>
    </div>
  )

 

 

• 내부 링크 public 방식
  • public 폴더는 서버와 계속해서 통신을 진행하고 있기 때문에
  • 폴더 안에 저장하는 것 만으로도 고유주소를 갖게 됨(업로드)
    
    • 해당 주소 값을 가져와서 사용
    • ex) http://localhost:3000/img/이미지1.jpg

return (
    <div>
        <p>내부 링크 public 방식</p>
        <img src='http://localhost:3000/img/이미지1.jpg' width='300px'></img>
    </div>
  )