6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【django】アップロード画像を表示できない原因

Last updated at Posted at 2020-05-07

djangoでアップロード画像の表示に苦戦したので、表示できない原因を残しておきます。

開発環境

  • Windows 10(WSL Ubuntu18.04)
  • django 3.0.5

前提条件

  • FileField、ImageFieldなどを利用して画像アップロードができていること

画像を表示できない原因

1. settings.pyのMEDIA_ROOTとMEDIA_URLの設定が間違っている

MEDIA_ROOT→アップロードファイルを保存する場所を指定

アップロードした画像はMEDIA_ROOTで指定したディレクトリ内のupload_atで指定したフォルダ内に保存される。

MEDIA_URL→メディアディレクトリの公開用URLを指定

例えば、

MEDIA_URL='/media/'とした場合、

http://127.0.0.1:8000/media/{画像名}が画像を表示するための公開用URLになる。

2. {アプリ名}/urls.pyにstatic()文を追加

urls.pyにstatic(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)を入れることで

MEDIA_ROOTのディレクトリ内のファイルをMEDIA_URL起点のurlでアクセスできるようになる。

これがないと一致するURLパターンがないため、エラーとなると思う。

追加方法は以下の通り。

urls.py
urlpattern = [
・・・
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. htmlのimgやaタグのリンクに画像までのパスを指定する(私はこれが原因でした)

最後にhtmlファイルでimgやaタグを利用して画像を表示する。

imgのsrcやaのhrefには、アプリ名+MEDIA_ROOTを起点とした画像までのパスを指定する。

tmp.html
<img src="/{appname}/{画像ファイルへのパス}">
tmp.html
<a href="/{appname}/{画像ファイルへのパス}" download="output">

参考サイト

6
6
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?