작성
·
27
·
수정됨
0
공익을 위해 첨부합니다...
Windows의 경우 Mac과 다른 방식으로 경로가 설정되는 탓인지 상품 업로드 후 홈화면에서 상품이미지가 엑박으로 보이는 오류가 발생합니다.
그동안 질문&답변 게시판에 올라온 모든 질문 및 답변을 참고해 해결을 해보고자 하였는데요, 그 어느 답변을 참고해도 해결이 되지 않아 눈물을 머금고 10분짜리 강의에 몇시간동안 매달려있었습니다. 그렇게 알게된 방법은...
저의 경우
(1) 상품 업로드 화면에서 사진을 첨부한 후 개발자 도구의 Network에서 첨부한 사진의 링크를 보면 http://localhost:8080/upload/(상품이름).jpg
이런 식으로 뜹니다.
(2) 업로드 버튼을 누른 후 홈 화면으로 이동
(3) 개발자 도구의 Network에서 새롭게 업로드된 사진의 링크를 보면 http://localhost:3000/upload/(상품이름).jpg 이런 식으로 뜹니다.
이를 해결하기 위해, grab-market-web 폴더 (사용자에 따라 폴더 이름은 다를 수 있음) → src → main → index.js에서 product-card 의 product-img 부분을 확인합니다.
<div>
<img
className="product-img"
src={`${API_URL}/${product.imageUrl}`}
></img>
</div>
src 링크를 다음과 같이 변경합니다. 그럼 상품 업로드 화면에서의 이미지와 홈화면에서의 이미지가 localhost:8080로 동일해지기 때문에 상품 사진이 정상적으로 보입니다.
물론 이렇게 코드를 수정하고 나면 기존에 저장해놨던 상품들의 이미지에 엑박이 뜹니다. (images/products/__ 이런 식으로 폴더 내 이미지와 연결해둔 링크들이 http://localhost:8080/images/products/__ 처럼 변경되니 엑박이 뜨는 것으로 추정됩니다.)
어차피 이제 사진을 서버에 직접 업로드하는 방법으로 진행될 예정이니 그냥 기존의 상품들은 삭제하시면 될 것 같습니다. (DB Browser → 데이터 탐색 → 기존 상품 레코드 선택 → 현재 레코드 삭제하기 → 변경사항 저장하기 이용하면 삭제 가능합니다.)
저와 동일한 이유로 엑박 뜨는게 아니라면... 저도 모르겠습니다. 방법을 찾으시면 공유해주세요. 파이팅!
+)
상품 상세페이지를 들어가면 다시 엑박이 뜹니다.
<div id="image-box">
<img src={`${API_URL}/${product.imageUrl}`} />
{console.log(product.imageUrl)}
</div>
이때는 product 폴더의 index.js에 들어가여 image-box 부분을 다음과 같이 변경해주세요. 원리는 위와 동일합니다. 그러면 상세페이지에서도 정상적으로 작동합니다.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. sugi0jubak님.
Windows 환경에서 이미지 업로드가 정상적으로 되지 않는 문제를 해결하기 위해 직접 시도하신 방법을 공유해 주셔서 감사합니다. 설명해 주신 것처럼 경로 문제로 인해 이미지가 정상적으로 표시되지 않을 수 있습니다. 이미지 경로를 명확하게 설정하여 이미지가 올바르게 표시되도록 한 점이 인상적입니다.
유사한 질문 및 해결 방법 링크:
imageUrl에서 ‘/‘입력 관련
원문 URL: 링크
이 게시물에서는 경로 설정에 대한 이해와 해결을 위한 접근 방식에 관한 논의가 진행되었습니다. 경로 설정이 서버와 클라이언트 사이의 경로 문제를 해결하는 중요한 요소임을 설명합니다.
업로드 후 홈화면에서 이미지가 보이지 않습니다
원문 URL: 링크
여기서는 이미지 경로 및 서버 주소 문제로 인한 이미지 표시 오류 해결에 대한 토론이 진행되며, API 서버 주소를 온전히 붙여 해결하는 방법 등을 제안합니다.
경로 문제는 웹 개발에서 자주 발생하는 문제로, 특히 서로 다른 OS 환경에서는 경로 표기가 달라질 수 있습니다. 이러한 문제를 해결하기 위한 다양한 시도를 지속하시고, 문제 해결 접근 방식을 공유해 주셔서 감사합니다. 앞으로 이러한 노력을 통해 더욱 많은 개발자분들께 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.