배포시 public 이미지 경로 질문드립니다.

[퉁퉁이]

깃허브에 배포했더니 public폴더에 img 하위 폴더로 이미지를 모두 관리해서 경로를 못찾아 이미지가 모두 깨져서

process.env.PUBLIC_URL 를 썼더니 process is not defined 이라는 오류가 떠서 그런데

그냥process.env.PUBLIC_URL대신 ../public/img/ 이런식으로 풀경로를 써도 배포시에 이미지가 깨지는 문제가 사라질까요

[퉁퉁이]

구글링해서 해결 했습니다. ㅠㅠ

요새 편리하다는 vite를 이용해 프로젝트폴더를 만들었는데

vite는 process.env.PUBLIC_URL를 지원하지않아 .env파일을 만들어 그 안에 

VITE_PUBLIC_URL = 깃허브배포주소       를 입력해주고

import.meta.env.VITE_PUBLIC_URL를 이미지 경로 앞에 붙이니 배포 페이지에서도 제대로 나옵니다 ㅠㅠ

public 폴더 안에 img폴더를 만들어 빌드해서 배포페이지에 뿌릴 때 이미지가 배포 페이지주소 바로 뒤에

 '/img/이미지이름.jpg' 식으로 경로가 설정이 되게 해야 제대로 출력이 된다는 사실을 알았네요

css파일에서 url()에 넣었을때는 process.env.PUBLIC_URL없이도 잘 작동하는데 jsx파일에서만 이미지를 못찾는 이유는 잘 모르지만

뿌듯합니다.

항상 쉬운 강의 감사드립니다.

[글쓴이]

글