인프런 커뮤니티 질문&답변

공익을 위해 첨부합니다...

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 부분을 다음과 같이 변경해주세요. 원리는 위와 동일합니다. 그러면 상세페이지에서도 정상적으로 작동합니다.