당신은 멋쟁이, 우리는 장고쟁이~

0%

TodoList 11편 - 디테일 페이지에 이미지와 파일 표시

작성일 In , Disqus:

디테일 페이지에 이미지와 파일 표시


MEDIA 경로 설정



개발 단계에서 MEDIA 파일을 업로드 해줄 MEDIA 경로를 설정해 주어야 합니다.


confit/settings.py 파일로 가서, 아래와 같이 MEDIA 경로를 설정해 줍니다. 


1
2
3
4
# MEDIA_ROOT 설정 
# 사용자가 업로드하는 미디어 정적 파일들의 기본 경로 
MEDIA_ROOT = os.path.join(BASE_DIR, '.media')
MEDIA_URL = '/media/'


image 와 file URL 을 위한 쿼리셋 연습


쿼리셋을 연습하기 위해서


두개의 이미지 파일과, 두개의 파일을 가지고 있는 투두리스트 하나를 어드민에서 생성해 주었습니다.


image 의 URL을 얻기위해서, Shell_plus 에서 연습한 내용은 아래와 같습니다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
In [1]: t = TodoList.objects.get(pk=3)   
In [2]: images = TodoList_images.objects.filter(todo=t) 

# images 에, 해당 todo에 관련된 TodoList_images images 들을 담고, 
# 이를 순회하면서, 각 image 가 어떤 속성이 있는지 프린트 해봅니다. 
 

In [3]: for image in images: 
   ...:     print(dir(image))    


# 각 image 마다, image 라는 속성이 존재 하는것을 확인 할수 있습니다 
In [4]: for image in images: 
   ...:     print(dir(image.image)) 


# image.image 에는 url 속성이 있어서, image.image.url 을 출력하면, 
# 각 이미지들의 url 을 얻을수 있습니다. 

In [6]: for image in images: 
   ...:     print(image.image.url)
/media/todo/images/2020/05/todolist_logo.jpg
/media/todo/images/2020/05/main.jpg


이미지 URL 적용하기


이를 잘 활용하여, templates/todo/todo_list.html 파일에 적용해봅니다. 


1
2
3
4
5
6
7
8
<hr>
       남은 일수 : {{ todolist.remaining_days }}
       <hr>
       관련 이미지 : 
       {% for image in todolist.todolist_images_set.all %}
       <img src="{{ image.image.url }}" width="300px" height="350px" alt="reference_image">
       {% endfor %}
       <hr>


이렇게 까지 작업을 하고, 다시 투두 리스트의 디테일을 확인해보면,
이미지가 화면에 나올것이라고 생각하고 확인해 보면, 이미지가 화면에 표시되지 않는것을 확인 할수 있습니다.



브라우저를 열어서 요소 검사를 해보면, 아래와 같이 HTML 은 잘 작성이 되어 있는데,


이미지 표시가 안됩니다.



URL patterns 에 MEDIA_URL 추가


이 문제를 해결하기 위해서는,


config/urls.py 파일을 수정해 주어야 합니다.
기존 urlpatterns 에, MEDIA_URL 그리고, 루트를 설정해 주어야 합니다.

config/urls.py 파일 수정



  1. from django.conf import settings
  2. from django.conf.urls.static import static 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static 

urlpatterns = [
    path('admin/', admin.stie.urls),
    path('', include('todo.urls')),
]

urlpatterns += static(
	prefix=settings.MEDIA_URL, 
    document_root=settings.MEDIA_ROOT, 
)



위와 같이 수정을 해주었다면,

브라우저에서 한번 확인 해 봅니다. 투두리스트의 디테일을 확인하면,

해당 투두리스트의 관련 이미지가 화면에 표시되는것을 확인할수 있습니다.




파일 정보도 표시해주기


매우매우 비슷한 방식으로,


파일 정보도 디테일 페이지에 표시해줄수 있습니다.

일단, templates/todo/todolist_detail.html 파일에, 파일정보 부분을 아래와 같이 고쳐줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
<hr>
          관련 이미지 : 
          {% for image in todolist.todolist_images_set.all %}
          <img src="{{ image.image.url }}" width="300px" height="350px" alt="reference_image">
          {% endfor %}
          <hr>
          관련 파일 : <br><br>
          {% for file in todolist.todolist_files_set.all %}
          {{ file.files.url }}
          <a href="{{ file.files.url }}">(파일보기)</a><br>

          {% endfor %}

파일과 이미지를 표시하는 templates/todo/todolist_detail.html 을 위와 같이 수정해 주었다면,

브라우저로 어떻게 표시되는지 확인하러 갑니다.


관련 파일이라고 하는 항목에, 파일 주소가 표시되고,
파일보기 링크가 표시되는것을 확인 할수 있습니다.