【Django】画像を表示・アップロードする方法を実例付きで解説

（最終更新月：2022年4月）

✔このような方へ向けて書かれた記事となります

「Djangoで画像を表示する為にやることって何？」

「Djangoで画像をアップロードする機能の実装方法は？」

「初心者なので、実際のコードも見てみたい、、、」

✔当記事を通じてお伝えすること

Djangoで画像を表示するための4ステップ
Djangoで画像をアップロードする方法

✔YouTube解説動画

当記事の内容は動画を見ながら進めると、約15分程度で完了します。

動画ならではの情報も解説しているので、記事と一緒にご覧ください。

動画の概要欄には、単元ごとのコードを紹介しているgithubページも載せています。

実践Django Pythonによる本格Webアプリケーション開発 [ 芝田将 ]

created by Rinker

¥3,850 (2024/04/19 16:17:57時点楽天市場調べ-詳細)

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/04/20 14:20:30時点 Amazon調べ-詳細)

Djangoで画像を表示するための4ステップ

こちらでは、今まで作成してきた日報アプリの続きとして、画像を追加していきます。

日報アプリ開発のチュートリアルはこちらからどうぞ → 日報アプリの開発から公開まで

画像を表示するまでのステップは下記の通りです。

画像を保存するフォルダの作成
settings.pyでの記述
ブラウザからアクセスするためのurls.pyでの記述
HTMLから画像を取得する

画像を保存するフォルダの作成

Mediaファイルを保存するためのフォルダを作成します。

ここでは、「media_local」とし、プロジェクトフォルダ直下に作成していきます。

src > media_local

settings.pyでの設定

settings.pyに下記を追加します。

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / "media_local"

MEDIA_URL：ブラウザからアクセスする際のアドレス
MEDIA_ROOT：画像ファイルを読み込みにいく先のフォルダ

ブラウザからアクセスのための設定

メインの「urls.py」にて、下記を追加します。

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

urlpatterns = [
    ...
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

実際に画像へアクセスしてみる

<img src=”/media/ファイル場所” />

で読み込みができるようになりました。

画像ファイルは先ほど設定した「media_local」内に保存しないと正しく読み込まれません。

例えば下記に保存した場合は、

media_local > pages > D-Repo.png

HTMLのsrcはこちらの通りです。

<img src="/media/pages/D-Repo.png" />

あとはサイズなどを変更するためにスタイルを追加し、それぞれコードは下記の通りとなりました。

templates > nav.html

<nav class="navbar navbar-dark bg-primary">
    <div class="container-fluid">
      <div>
        <a class="navbar-brand" href={% url "nippo-list" %}>
             <img src="/media/pages/D-Repo.png" style="width:50px;"/>
        </a>
      </div>
      <div class="flex-grow-1" style="max-width:500px;">
        <form class="d-flex" method="GET">
          <input class="form-control me-2" type="search" placeholder="検索..." aria-label="Search" name="search">
          <button class="btn btn-outline-light" type="submit">search</button>
        </form>
      </div>
      <div class="text-light nav-item dropdown">
          <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            ユーザー名
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">アカウント設定</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">ログアウト</a></li>
          </ul>
      </div>
    </div>
  </nav>

templates > footer.html

<footer class="bg-primary">
  <div id="footer-logo">
    <a href={% url "nippo-list" %}>
        <img src="/media/pages/D-Repo.png" style="width:80px;"/>
    </a>
  </div>
  <div class="footer-content">
      <div>
          <a href="#">
              プライバシーポリシー
         </a>
      </div>
      <div>|</div>
      <div>
          <a href="#">
              利用規約
          </a>        
      </div>
      <div>|</div>
      <div>
          <small>Copyright &copy; 2021 yulikepython</small>
      </div>
  </div>
</footer>

Djangoで画像をアップロードする方法

画像をアップロードするための設定は下記の通りです。

Pillowのインストール
モデルフィールド「ImageField」を作成し、データベーステーブルを作成
アップロード画面の作成

一つずつ見ていきます。

Pillowのインストール

pipを使い、Pillowをインストールします。

pip install Pillow

モデルフィールド「ImageField」の作成

ImageField(upload_to=None, height_field=None, width_field=None, max_length=100)

引数を設定しない場合は、settings.pyの「MEDIA_ROOT」フォルダ直下にデータが保存されます。

任意のフォルダに保存したい場合は、下記のステップでフォルダを指定する必要があります。

MEDIA_ROOTで指定したフォルダ内に任意のフォルダを作る
ImageFieldのオプション「upload_to」でフォルダ名を指定する

例えば、「images」というフォルダに保存する場合は実際にフォルダを作成した上で、下記の通りとします。

class ImageUpload(models.Model):
    title = models.CharField(max_length=100)
    img = models.ImageField(upload_to="images")#こちらの通り

    def __str__(self):
        return self.title

アップロード画面の作成

最後のステップでは、アップロード画面を作成します。

ここでは簡単にするためにモデルフォームクラスを使用しての方法で進めます。

forms.py

モデルフォームクラスで下記の通りとします。

from django import forms
from .models import ImageUpload

class ImageUploadForm(forms.ModelForm):
    class class Meta:
        model = ImageUpload
        fields = "__all__"

views.py

フォームをテンプレートへ渡します。

「CreateView」を使って進めます。

from django.views.generic.edit import CreateView
from .forms import ImageUploadForm

class ImageUploadView(CreateView):
    template_name = "nippo/image-upload.html"
    form_class = ImageUploadForm
    success_url = "/"

image-upload.html

テンプレートでフォームを表示します。

{% extends 'base.html' %}

{% block contet %}
    <form method="POST" enctype="multipart/form-data">{% csrf_token %}
        {{ form.as_p }}
        <button type="submit">送信</button>
    </form>
{% endblock %}

こちらの2つを忘れないように気をつけましょう。

1. enctype="multipart/form-data"
2. {% csrf_token %}

urls.py

ビュークラスとURLを紐付けします。

from django.urls import path
from .views import ImageUploadView

urlpatterns = [
    path("image-upload/", ImageUploadView.as_view(), name="image-upload")
]