[React] React Vite 프로젝트를 vercel 통해 배포 시 (폴더내부) 이미지 안 뜨는 현상 (=> 웹 url주소 이미지로 대체)

240206 화 TIL ✏️

 

리액트 프로젝트를 CRA 로 만들다가, Vite 를 알게된 이후로는 훨씬 빠르다는 장점 때문에

이를 통해 프로젝트를 만들고 있는데 ..

아마도 vite 로 만들어서 생긴 문제인 듯 한 문제현상이 있었다 ㅠㅠ

로컬에서는 이미지가 잘 뜨다가, vercel을 통해 리액트 프로젝트를 배포 시에만 이미지가 뜨지 않았다.

이렇게..

그래서 구글링 검색을 통해 여러 시도를 해봤지만 다 실패했다.

VELOG hskwon517 - 사이트 배포 후에 이미지 엑박뜨는 오류

이 velog 도 참고해서 해보고

구글링 결과대로 깃헙에 올라온 웹주소를 복사해서 해본다든지,

public 폴더 안에 img 폴더를 만들어서 한다든지, (근데 public폴더안에 이미지가 있어서 경로 설정 문제가 생기기도)

vite프젝은 vercel.json을 따로 만들어야 한대서 만들어본다든지

환경변수 통한 경로 설정 이라든지.. (는 잘 모르겠지만 쓰인데로 해보긴했다. 그치만 이건 CRA 문서에 나온거였고 혹시나 해봤지만 실패. 더 깊이 파보면 뭔가 나올지도 모르겠다!)

config로 절대경로 설정을 해서 그런건가해서 수정도 해보고 ㅠㅠ

 

뭔가 더 복잡한 내용이 있기도 했는데 우선은 시간이 없고 지금 더 깊이 알기엔 힘들 것 같았다.

일단 폴더 내부 경로로는 절대 되지 않았다 ..

<img src="src/assets/... .jpg />    => X

 

 

결국 외부 웹 사이트 URL 경로를 쓰기로 했다. (이미지 주소 복사로)

그러니까 vercel 배포로도 잘 뜬다 !

내부 이미지 경로로 사용하는 방법은 다음에 더 자세히 알아봐야 할 거 같다.