Djangoで画像を扱う

Djangoで普通に画像を表示させたいだけなのですが、これがなかなか面倒だったので覚書として残しておきます。

参考にしたのはこちらのサイト
https://coffee-nominagara.com/django-show-image

Djangoではhtmlに通常通り
<img src="" alt="">
とコードを書いただけでは画像が表示されません。
決められて場所に画像を配置して、設定ファイルにいくつか追記する必要があります。

まずはファイルの配置場所。
作成するアプリのフォルダの直下にstaticというフォルダを作り、staticフォルダ直下にアプリと同じ名前のフォルダ(そういう慣例らしいです。もしかしたら違う名前でも問題ないかもしれません。知らんけど。)を作り、その直下に画像ファイルを配置します。
例えばアプリ名をappとすると、
app - static - app - 〇〇.png
みたいな感じになります。

フォルダ階層

次にurls.py(アプリの直下にあるほう)に追記。

from django.contrib import admin
from django.urls import path
from .views import IndexView
from django.conf.urls.static import static 
from django.conf import settings   

urlpatterns = [
   path('', IndexView.as_view()),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 

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

+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
を追記します。
ファイルのありかを指示しているのだと思いますが、意味はよくわかりません。おまじない程度に思っておいていいそうです。

次にsettings.pyに以下を追記。

STATIC_URL = '/static/'

STATICFILES_DIRS = (
   [
       os.path.join(BASE_DIR, 'static'), 
   ]
)

これで画像を表示できるよう設定は完了。

あとはhtmlで通常通りコードを書けば表示できるのですが、
{% load static %}
これを書き忘れないようご注意。
わかりやすいようにhtmlファイルの先頭行に置けばいいように思うのですが、bodyタグのすぐ下に書く人やhtmlタグの下に書く人などいろいろいるようで正解はよくわかりません。

この記事が気に入ったらサポートをしてみませんか?