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

sh007.jeong님의 프로필 이미지
sh007.jeong

작성한 질문수

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

easy-thumbnails를 활용한 유저페이지 썸네일 처리 구현

easy-thumbnails 라이브러리 적용 시 이미지 주소 불러오기가 안되요

작성

·

403

0

안녕하세요. 강의 잘 듣고 있습니다.

easy-thumbnails 라이브러리를 템플릿에 적용하니 이미지가 보이지 않는 문제가 생깁니다. 페이지 소스를 보니 이미지 경로가 아예 안 불러와지는 것 같습니다. (라이브러리 적용 전에는 이미지 정상 출력)

강의와 깃헙 페이지를 참고하여 라이브러리 설치 및 settings.py 설정(INSTALLED_APPS 추가)하고 마이그레이션을 했는데도 그러네요.

템플릿 소스 코드와 페이지 소스코드는 다음과 같습니다.

뭐가 문제인지 힌트 주시면 감사하겠습니다.

 

템플릿 소스 코드

{% extends "ingstagram/layout.html" %}
{% load thumbnail %}

{% block content %}
<div class="container">
<div class="row pt-3 pb-3">
<div class="col-sm-3" style="text-align: center;">
<img src="{{ page_user.avatar_url }}" alt="" class="rounded-circle" style="width: 160px;"/>
</div>
<div class="col-sm-9">
{{ page_user.username }}
<a href="{% url 'accounts:edit_profile' %}" class="btn btn-secondary btn-sm">프로필 수정</a>
<hr/>
0 posts, 0 follows, 0 following
<hr/>
{{ page_user.name }}
</div>
<div class="row mt-3">
{% for post in post_list %}
<div class="col-sm-4">
<img src="{% thumbnail post.photo.url 256x256 crop %}" alt="{{ post.caption }}" style="width: 100%;"/>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}

 

 

페이지 소스 코드

<code>

    <div class="container">

        <div class="row pt-3 pb-3">

            <div class="col-sm-3" style="text-align: center;">

                <img src="/identicon/image/testuser/" alt="" class="rounded-circle" style="width: 160px;"/>

            </div>

            <div class="col-sm-9">

                seunghojeong

                <a href="/accounts/edit/" class="btn btn-secondary btn-sm">프로필 수정</a>

                <hr/>

                0 posts, 0 follows, 0 following

                <hr/>

                Daniel Jeong

            </div>

            <div class="row mt-3">

                    <div class="col-sm-4">

                        <img src="" alt="두 번째 테스트 포스팅#Django #Python #2022년3월" />

                    </div>

                    <div class="col-sm-4">

                        <img src="" alt="세번째 이미지" />

                    </div>

                    <div class="col-sm-4">

                        <img src="" alt="네 번째 이미지" />

                    </div>

                    <div class="col-sm-4">

                        <img src="" alt="다섯 번 째" />

                    </div>

            </div>

        </div>

    </div>

</code>

 

답변 2

1

sh007.jeong님의 프로필 이미지
sh007.jeong
질문자

아 그렇군요! 이해와 해결이 동시에 됐습니다.

감사합니다.

1

이진석님의 프로필 이미지
이진석
지식공유자

안녕하세요.

thumbnail 템플릿 태그를 통해서 빈 문자열이 생성되고 있네요. 이는 thumbnail 템플릿 태그 내부적으로 오류가 발생해서 빈 문자열이 그려진 듯 합니다.

아래와 같이 코드를 쓰셨는데요.

{% thumbnail post.photo.url 256x256 crop %}

공식문서를 보시면

https://github.com/SmileyChris/easy-thumbnails#manually-specifying-size--options

thumbnail 템플릿 태그의 첫번째 인자로 필드를 지정합니다. 그런데 쓰신 코드에서는 .url 속성을 통해 필드가 아닌 문자열을 지정하셨습니다. 아마도 이 부분이 이슈가 아닐까 싶습니다.

{% thumbnail post.photo 256x256 crop %}

위와 같이 써보시면 어떨까요?

화이팅입니다. :-)

sh007.jeong님의 프로필 이미지
sh007.jeong

작성한 질문수

질문하기