리액트 빌드 시 public 하위 폴더 이미지 경로

[김선우]

리액트로 프로젝트를 만들어서 빌드 및 깃헙페이지에 배포를 시도해보고있습니다 

배포에 성공하고 나서 확인해보니 깃허브에 배포 된 사이트는 개발환경과 다르게 이미지 경로를 찾지 못하여 이미지 엑박을 띄우는 문제가 발생했습니다.

작성해주신 글에서 이미지가 안뜨는 경우에 대해 언급해주신 부분을 보니 이미지 파일의 저장 경로를 public폴더 안에 하위 폴더를 만들어 넣을 경우 생기는 문제인 것으로 보입니다.. 개발 환경에서 이런 문제가 생길 것을 예상 못했기 때문에 이미지 파일들을 따로 정리하기 위해 img라는 하위 폴더를 만들고 그 안에서도 분류를 위해 여러 하위 폴더를 만들어 이미지 파일들을 분류해뒀습니다. 제가 작성한 코드들이 이미지를 불러오는 경로도 모두 public 하위 폴더의 하위폴더를 타고 들어가게끔 경로를 지정해둔 상태입니다..
사연설명이 길었네요 여쭤보고 싶은 내용은
배포 환경에서 이미지 경로 문제 없이 접근하기 위해선
public에 하위 폴더를 만들지 않고 모든 이미지 파일을 다 때려넣고 파일명으로 구분하는 수 밖에 없나요??
작성한 코드에서 설정한 모든 이미지 경로와 분류해둔 이미지 파일들을 다 재배치 하기엔 시간 소모가 클 것으로 보여서 지금처럼 public에 하위 폴더가 존재하는 상태로 빌드 했을 때에도 하위 폴더 파일에 접근이 가능한 방법을 모색하고 있습니다.. 무언가 방법이 없을까요 ㅠ

[codingapple]

public폴더 안에 img폴더만들고 거기에다가 이미지를 저장했고 개발시엔 잘 출력되는데 저기다가 올리면 안된다는 것이면

깃헙에 올린 사이트는 개발자도구 켰을 때 이미지의 src 경로가 어떻게 나오나요

 

public안에 img라는 하위폴더에 있는 이미지를 쓰고 싶으면 그냥 <img src="/img/image.jpg"> 이렇게 쓰면 될걸요 

[김선우]

말로는 상황이 잘 설명이 안될 것 같아 사진 같이 첨부해봅니다.. 

public폴더에 바로 저장한 이미지는 개발환경 + 배포 환경 모두 잘 찾아옵니다

그런데 public 하위 폴더를 만들고 그 안에 저장한 이미지들은 개발환경에서만 잘 찾아오고

빌드 및 배포 환경에서는 찾지를 못합니다... 

[김선우]

네 맞습니다 예시로 들어주신 것과 같이 경로가 나옵니다 (개발자 도구로 확인시)
개발환경에서도, 업로드 환경에서도 동일하게 /img/이미지파일.jpg 경로로 나오고

실제 코드도 형태로 작성되었습니다.

 

[codingapple]

내아이디.github.io/

여기다가 배포하셨습니까 아니면

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

경로에 배포하셨습니까

 

[김선우]

리포지토리명 경로에 배포하였습니다.

글의 설명에 나온 것 처럼 BrowserRouter의  basename="" 에 리포지토리명을 입력하였으며

package.json에서 homepage:리포지토리명이 포함된 깃허브 페이지 링크

를 입력해주었습니다.

[codingapple]

그러면 이미지넣으실 때  

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

절대경로를 쓰시든가 하면 될듯요

github pages 버그인지 의도사항인지 그런거라 그냥 거기 올릴 땐 src폴더 이용하는게 편리합니다 

[김선우]

아아.. 세상에 ㅠㅠ 하루종일 해결 못한게 다 해결됐네요 감사합니다 

개인적으로 강의에서도 public폴더를 사용해라 src폴더를 사용해라 내용이 오락가락해서 이부분도 구글링 해서 이것저것 시도해본 걸로 기억하는데

아마 제가 잘못 따라한건지 src폴더 + import로 이미지를 불러오면서 이용하는 방식은 제대로 동작을 안하더라구요..(이미지를 못불러오는 그런 문제였던 것 같습니다)

그래서 그냥 public방식은 문제 없이 이미지가 불러와지길래 문제없을줄알고 이대로 다 코드를 짜놨더니
빌드하고 배포한 환경에서는 경로를 못찾는 문제가 생길 수 있다는걸 이제야 알았네요... 

좀 불편하더라도 개발환경에서부터 절대경로로 이미지 파일에 접근하는 습관을 들여야 할 것 같습니다 ㅜ 
https://joraeng.github.io/shop/ 

덕분에 사이트 잘 완성했습니다 감사합니다 슨생님 ㅎㅎ 

[codingapple]

넴 이미지 파일명을 그대로 보존하고 싶으면 public폴더 

그게 아니면 src폴더에 넣습니다 

[codingapple]

오 만드신거 디자인 오졌다리 

[글쓴이]

글