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

Django

(最終更新月:2022年4月)

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

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

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

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

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

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

【著者プロフィール】

profile_icon
【Python歴】11年 x 【Django歴】10年
HP作成、社内システムの構築、コンサルティング

当ブログを通じて、Webアプリの書き方やアプリの公開方法までを解説しています。

☆日報アプリ「D-Repo」(デモ版)→こちら

※Djangoをベースに作成したアプリです。

☆便利ツールアプリ「Tool Station」→こちら

※Django REST frameworkとReactで作成しているアプリです。

✔月9,800円でWebデザインが学べる

デザナルは、Webデザインに苦手意識がある方におすすめのサブスク型スクールです。

特徴は以下の通り。

  • 初期費用不要
  • 教材が使い放題
  • 案件で収入も得られる

デザナルは稼ぎながら学べる、格安のWebデザインスクールです。

>>詳細はこちら<<

安いWebデザインスクール「デザナル」を徹底分析

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

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

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

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

  1. 画像を保存するフォルダの作成
  2. settings.pyでの記述
  3. ブラウザからアクセスするためのurls.pyでの記述
  4. 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で画像をアップロードする方法

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

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

一つずつ見ていきます。

Pillowのインストール

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

pip install Pillow

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

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

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

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

  1. MEDIA_ROOTで指定したフォルダ内に任意のフォルダを作る
  2. 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")
]

完成!

簡易的なフォームですが、これで完了です。

以上で、任意のフォルダにユーザーが画像を保存できるページが完成しました。

もし、動的にフォルダ名やファイル名を変更したい場合などは下記の記事で応用編をご紹介しています。

まとめ

当記事では、Djangoアプリで①画像を表示する方法②画像をアップロードする方法について解説しました。

画像を表示する方法は、下記のステップで行います。

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

画像をアップロードする方法は、こちらの通りです。

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

ただし、表示する方法で説明済みのsettings.pyにおける設定は必要になります。

合わせてご確認しておきましょう。

さて、次回の記事では、Bootstrapの「Card」を使ったリストビュー・ディテールビューの表示方法を解説していきます。

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」

という方は必見です!

【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

タイトルとURLをコピーしました