로컬에선 잘 불러와지던 이미지가 깃헙으로 배포하니까 안나옴

이미지 경로는 항상 말썽인것 같다,,

1. src안에 있는 이미지 넣는 법
   import 이미지 from ‘./이미지경로.jpg’

<img src={이미지}>

2. src안에 있는 이미지 css파일에 넣는 법

background-image : url(‘이미지경로’)

3. public/assets 폴더 안에 있는 이미지 넣는 법

<img src=”/assets/이미지명.jpg”>

(public 안에 assets 폴더를 만들어야 이용가능)

4. public/assets 폴더 안에 있는 이미지 css파일에 넣는 법 (background-image)

<div style={ {backgroundImage:’url(/assets/logo5121.png)’} }>

(public 안에 assets 폴더를 만들어야 이용가능)

출처 :
https://codingapple.com/forums/topic/%eb%b0%b1%ea%b7%b8%eb%9d%bc%ec%9a%b4%eb%93%9c-%ec%9d%b4%eb%af%b8%ec%a7%80-%ea%b4%80%eb%a0%a8/

이렇게 해서 로컬에선 잘 불러와졌는데 배포를 하니까 public/assets에 있는 이미지가 또 불러와지지 않았다. (src안에 있는 이미지 css파일에 넣는건 오류가 나지 않았음)

일단 src경로와 public 경로에 넣는 데엔 차이점이 있는데

빌드를 할 시 파일명을 그대로 보존하고 싶으면 public 폴더, 그게 아니면 src 폴더이다.

내아이디.github.io/리포지토리명/

경로에 배포를 한다면

src 부분에

<img src="https://내아이디.github.io/리포지토리명/assets/image.jpg">

이렇게 절대경로를 작성해야 한다는걸 알게 되었다.