【Django】画像ファイルの扱い方

アイキャッチ画像
  • Djangoでの画像ファイルの扱い方とは?
  • フォルダをどう分けたら良いの?
  • テンプレート(HTMLファイル)に表示させるには?

本記事ではこのような疑問を解決します。


Webアプリケーションでは画像ファイルを扱うのがマストでしょう。

それはDjangoにおいても然りです。

今回はDjangoでの画像ファイルの扱い方を解説していきます。

staticフォルダとmediaフォルダ

Djangoで画像ファイルを扱う場合、staticフォルダとmediaフォルダを使います。

staticフォルダとmediaフォルダについては以下の通りです。

○staticフォルダ

staticフォルダはDjangoの静的ファイルを保存するフォルダです。
静的ファイルとは画像ファイルの他にCSS・JSファイルを指します。
一般的に画像ファイルを扱う場合はstaticフォルダの中にimagesフォルダを作成して、その中に画像ファイルを保存します。
なお、これらの静的ファイルはもちろん管理者が設定等を行うファイルです。

○mediaフォルダ

mediaフォルダはユーザーがアップロードした画像ファイルを保存しておくフォルダです。
イメージとしては、SNSで写真を投稿した場合にmediaフォルダに保存されるというのがわかりやすいでしょう。

上記2つの違いは、画像ファイルを誰が保存するかということです。

すなわち、staticフォルダは管理者(開発者)が保存し、mediaフォルダはユーザーが保存します。


それでは次からstaticフォルダとmediaフォルダ両者の設定方法を確認していきましょう。

staticフォルダの設定方法

①settings.pyで設定を行う

# staticフォルダのURLパスを設定
STATIC_URL = '/static/'

# staticフォルダの場所を設定
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static/')]

# デプロイ用に静的ファイルを収集するディレクトリを指定(開発環境では不要)
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

②urls.pyでstaticファイルの読み込み設定をする

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

urlpatterns = [
    path('', views.hello_world, name='hello_world'),
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS)

③htmlファイルで画像ファイルを読み込む記述をする

{% load static %}

<!-- 画像ファイル(static/images) -->
<img src="{% static 'images/sample.jpg' %}">

<!-- CSSファイル(static/css) -->
<link href="{% static 'css/sample.css' %}" rel="stylesheet" />

<!-- JSファイル(static/js) -->
<script src="{% static 'js/sample.js' %}"></script>

mediaフォルダの設定方法

①settings.pyで設定を行う

# mediaフォルダのURLパスを設定
MEDIA_URL = '/media/'

# アップロードファイルなどを読み込む際のフォルダの場所を記述
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

②urls.pyでstaticファイルの読み込み設定をする

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

urlpatterns = [
    path('', views.hello_world, name='hello_world'),
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

まとめ

以上がDjangoでの画像ファイルの扱い方になります。

Djangoでは管理者用のstaticフォルダとユーザー用のmediaフォルダの2つで画像ファイルを扱うことを覚えておきましょう。

関連記事

Djangoが学べるプログラミングスクールとは?おすすめのDjangoスクールとは? 本記事ではこのような疑問を解決します。DjangoはPythonで作られた中で1番メジャーなWebフレームワークです。みんなが普段利用するYouT[…]

アイキャッチ画像
関連記事

Pythonを安く学べるプログラミングスクールとは?Pythonプログラミングスクールでは何が学べるの? 本記事ではこのような疑問を解決します。IT需要の増大により注目を集めているプログラミング言語の中でも、人気が急上昇している言語[…]

アイキャッチ画像