리액트 쇼핑몰 배포시 이미지엑박문제가 생겼습니다

[이하은]

현재 리액트 쇼핑몰 프로젝트를 깃에 올려서 vercel에서 확인하고 있습니다.
배포엔 성공하였으나
첫번째 사진과 같이 하단 연두색 이미지가 보여야 하지만 배포 후에는 이미지가 엑박으로 뜹니다.



  
시도해본 방법은 이미지 경로를 바꿔보는 것 입니다.

기존 : 
< img src={process.env.PUBLIC_URL + '/images/footer.png'} width='1899' height='139' alt='하단이미지'/>

시도 : 
< img src="https://haeunss.github.io/haeunss.github.io/public/images/footer.png" />
< img src="https://haeunss.github.io/haeunss.github.io/images/footer.png" />
< img src="https://haeunss.github.io/images/footer.png" />
< img src='../images/footer.png' />
< img src='./images/footer.png'/>
< img src='/images/footer.png'/>
< img src='images/footer.png'/>

이미지는 footer.png이며
경로는 public의 images 폴더에 있습니다.

참고로 경로를 바꿔 엑박이 해결되는지 테스트 할 때는 아래 사진처럼 깃에서 직접 수정하여 코드를 변경하였습니다.


깃과 vecel 주소입니다.
https://github.com/haeunss/haeunss.github.io.git
https://shop-haeunss.vercel.app/

[codingapple]

github에있는 이미지 절대경로 넣어봅시다 
https://github.com/haeunss/haeunss.github.io/blob/main/public/images/footer.PNG?raw=true

[이하은]

우와.. 정말 캡짱.. 감사합니다


github에 올린 이미지의 절대경로를 작성하는 방법은

git에 업로드한 이미지의 url인
https://github.com/haeunss/haeunss.github.io/blob/main/public/images/footer.PNG

여기에 ?raw=true 를 추가로 작성하는 건가요?!

[codingapple]

이미지 우클릭해서 주소복사합시다

[이하은]

아하 감서헙니다!!!!!

[글쓴이]

글