인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

sugi0jubak님의 프로필 이미지

작성한 질문수

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

상품 업로드 기능 구현 - 2

Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법

작성

·

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 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. sugi0jubak님.

Windows 환경에서 이미지 업로드가 정상적으로 되지 않는 문제를 해결하기 위해 직접 시도하신 방법을 공유해 주셔서 감사합니다. 설명해 주신 것처럼 경로 문제로 인해 이미지가 정상적으로 표시되지 않을 수 있습니다. 이미지 경로를 명확하게 설정하여 이미지가 올바르게 표시되도록 한 점이 인상적입니다.

유사한 질문 및 해결 방법 링크:

  1. imageUrl에서 ‘/‘입력 관련
    원문 URL: 링크
    이 게시물에서는 경로 설정에 대한 이해와 해결을 위한 접근 방식에 관한 논의가 진행되었습니다. 경로 설정이 서버와 클라이언트 사이의 경로 문제를 해결하는 중요한 요소임을 설명합니다.

  2. 업로드 후 홈화면에서 이미지가 보이지 않습니다
    원문 URL: 링크
    여기서는 이미지 경로 및 서버 주소 문제로 인한 이미지 표시 오류 해결에 대한 토론이 진행되며, API 서버 주소를 온전히 붙여 해결하는 방법 등을 제안합니다.

경로 문제는 웹 개발에서 자주 발생하는 문제로, 특히 서로 다른 OS 환경에서는 경로 표기가 달라질 수 있습니다. 이러한 문제를 해결하기 위한 다양한 시도를 지속하시고, 문제 해결 접근 방식을 공유해 주셔서 감사합니다. 앞으로 이러한 노력을 통해 더욱 많은 개발자분들께 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.