아주간단합니다. js에서 이미지를 로드(직접경로) 했을때 에러가 나는 원인이 궁금합니다.

Question

안녕하세요. 이런 폴더구조를 가질때 이렇게 이미지를 업로드하면 로컬에서든 vercel에 배포하든 이미지가 잘 불러와집니다. 하지만 위의 경우에서는 public안에 이미지를 관리할 경우 절대경로로 이미지를 업로드하면 로컬에서는 되는데 서버에 올라간 순간 404 에러가 납니다.두 환경 모두 vanilla.js를 통해 구현하였고 따로 번들러를 이용하지 않았습니다.어째서 이런 차이가 나는 걸까요?

내얼굴피콜로 · Answer

vercel을 써본적이 없어서 잘 모르겠지만 한가지 추측하는건 vercel쪽에서 /public 폴더 아래에 있는 파일들이 루트(/)에서 접근 가능하도록 설정하고 있을 수 있습니다 (다른 웹서버에서 정적자원을 제공할 때 이런식으로 해서 이렇게 추측해봅니다! )예를 들어, /public/images/myImage.png의 경로로 저장된 이미지는 https://your-domain.com/images/myImage.png로 접근할 수 있는것이죠

rarity · Answer

웹 서버에서 해당 파일시스템 경로 열어 두셨나요?

RWB · Answer

피콜로 님 말에 첨언하자면..소스코드 폴더가 src라, src 하위에 이미지를 넣으면 빌드 후에도 알아서 인식합니다.하지만 public 같은 폴더에 두시면, 소스코드가 아니라 그냥 정적 파일을 라우팅하도록 설계됩니다.즉, /public/image.png는 실제 배포에서 https://example.com/image.png 가 됩니다.public 하위의 파일을 자동으로 루트에 라우팅하는 형식입니다.왜 하필 public이냐고 하면, 해당 프레임워크 만든 개발자의 마음입니다.React의 next.js 경우, 질문자분과 비슷하게 public 폴더를 위와 같은 용도로 사용합니다.gatsby.js는 static이라는 폴더를 위와 같은 용도로 사용합니다.혹시 직접 만드신거라면, 원하시는대로 지정하실 수 있습니다.소스코드 구조 보니 React 비스무리한 것 같은데 CRA는 아닌 것 같고..자세한 건, 현재 사용중인 라이브러리나 프레임워크 알려주시면 더 자세한 답을 얻으실 수 있을 것 같습니다.

아주간단합니다. js에서 이미지를 로드(직접경로) 했을때 에러가 나는 원인이 궁금합니다.

3개의 답변

Q&A 목록