원하던 전체 리뷰 화면

해당 주차의 그룹과제:

• 상품 별로 리뷰를 등록
• 전체 리뷰 화면:
  • 리뷰 총 개수
  • 리뷰 제목
  • 사진
  • 페이지네이션

원하던 상세 리뷰 화면

해당 주차의 그룹과제:

• 각 리뷰 클릭시, 상세 리뷰 화면으로 이동
• 상세 리뷰 화면:
  • 리뷰 제목
  • 별점
  • 상세 후기
  • 리뷰 사진

코드 실행 시 발견한 문제

리뷰 전체 화면과 상세 리뷰 화면 모두 이미지가 제대로 뜨지 않는 문제 발생!

문제 디버깅 방법

1. 마우스 우클릭 후 페이지 소스 보기 클릭

1. 페이지 소스의 이미지 소스 클릭

   

   이미지 소스를 클릭하면 아래와 같이 not found 오류가 뜬다.

   

   정상적인 이미지의 경우 아래와 같이 떠야 한다.

   

2. 이미지 경로 비교

   정상적인 이미지 경로:

   <https://ewha-market777.run.goorm.site>**/static/images/**volleyball.jpg
   

   오류 발생한 이미지 경로:

   <https://ewha-market777.run.goorm.site/apple_review.jpeg>
   

   둘을 비교해봤을 때 /static/images/ 부분이 빠져있었다.

해결 방법

정상적인 이미지 경로와 비교해서 **/static/images/**가 빠져있음을 알게 됐고, 이를 통해 코드에 이 부분을 추가해주었다.

<원래 코드>

{% extends "index.html" %}

{% block section %}
<p>
    review title is <b>{{data.title}}</b> and rate is {{data.rate}} points out of 5 points.
</p>
<p>
   {{data.review}} 
    
</p>

<img src="../../{{data.img_path}}", width=140, height=200> <br>

{% endblock section %}