【Python Django】イメージファイルのアップロード、表示に苦労した時の対応方法

Djangoにてサイト作成時にイメージファイルのアップロードができない、表示が出てこないで困ったことがありました。

その場合のやり方の１つにの方法になります。

これは、ネットでググりまくった結果となりますが、

（１）プロジェクトの settings.py に static ファイルのパスを定義
（２）プロジェクトの urls.py に static ファイルを表示するためのパスの関連付けを定義
（３）プロジェクトの models.py のモデルにイメージファイルを追加
（４）views.pyには、元々モデルをHTML側に渡す記載あり
（５）HTML側にて、モデルデータ表示箇所にイメージファイル表示用コード追加

（１）settings.pyにて、
MEDIA_URL = '/media/' # 追加
MEDIA_ROOT = BASE_DIR # 追加

MEDIA_ROOT = BASE_DIRとすることで、イメージファイルのフォルダの親パスを指定
BASE_DIRはプロジェクトのディレクトリ絶対パスです。
今回はmediaフォルダの親パスとなるようです。

（２）urls.pyにて、
元々、
from django.contrib import admin
from django.urls import path,include

urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blog.urls')),
]

のような形になっていたとすると、
先頭に、
from django.conf.urls.static import static #追加
from django.conf import settings #追加
追加し、urlpatterns に
+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
を追加
結果として、

from django.contrib import admin
from django.urls import path,include
from django.conf.urls.static import static #追加
from django.conf import settings #追加

urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blog.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) #追加
のような内容になります。
（+ static(～) で、URLパターンに static ファイルのパスを追加）

（３）models.pyにて、
元々、
class Post(models.Model):
author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
title = models.CharField(max_length=200)
text = models.TextField()
created_date = models.DateTimeField(default=timezone.now)
published_date = models.DateTimeField(blank=True, null=True)
となっていたものに対して、
image = models.ImageField(upload_to='media', null=True) #追加
結果として、

class Post(models.Model):
author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
title = models.CharField(max_length=200)
text = models.TextField()
created_date = models.DateTimeField(default=timezone.now)
published_date = models.DateTimeField(blank=True, null=True)
image = models.ImageField(upload_to='media', null=True) #追加
のような形になった。

models.ImageField(upload_to='media')にて、モデルにイメージファイル追加
upload_to='media' は、イメージファイルを追加するフォルダ。
今回の登録の場合、プロジェクトフォルダ直下のmediaフォルダに格納される。

実際に、まだこのフォルダがない状態で、管理画面からモデル内のイメージファイルを追加したところ、
プロジェクトフォルダの直下にmediaというフォルダが作成され、その中に追加したイメージファイルが格納されていた。

（４）views.pyには、
def post_list(request):
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
return render(request, 'blog/post_list.html', {'posts': posts})
あり。これにて、post_list.html側にモデルのpostsを渡している。

（５）post_list.htmlにて、
以下のように、元々あったモデル表示用箇所に、

と記載のある1行を追加。
{% for post in posts %}
{{ post.published_date }}
<h2><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h2>
{% if post.image %}
<img src="{{ post.image.url }}"/> 
{% endif %}
<p>{{ post.text|linebreaksbr }}</p>
{% endfor %}
これにて、モデル用としてですが、画像表示ができるようになりました。
よかった、よかった。

（５－２）ちなみに、（４）までやってあった状態で、
HTML側の別箇所に
<img src="/media/aaaaa.png" width="100%" height="20%" border="0" />
などと記載、
上記、
プロジェクトフォルダ/media/　フォルダ内に、
プロジェクトフォルダ/media/aaaaa.png
などと入れておくことで、単独でのイメージファイル表示もできました。