djangoで保存した画像ファイルを表示する。

前提・実現したいこと

djangoを使ってアップロードした写真のなかから管理者が許可した写真だけをギャラリーとして表示するウェブアプリを作ろうとしています。

発生している問題・エラーメッセージ

djangoのテンプレート内でdjangoテンプレート言語を使ってメディアディレクトリに保存してある画像を表示させたいのですができません。

該当のソースコード

#python

#settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)

MEDIA_ROOT = os.path.join(BASE_DIR,'media')

MEDIA_URL = 'media/'

#urls.py

from django.contrib import admin
from django.conf.urls.static import static
from django.urls import path,include
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

from django.conf import settings

urlpatterns = [
path('admin/', admin.site.urls),
path('',include('pic_upload_app.urls'))
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

#view.py

from django.shortcuts import render
from django.views import generic
from .models import Picture
from .forms import *
from django.urls import reverse_lazy

class GarallyView(generic.ListView):
model = Picture
template_name = "garelly.html"

def get_queryset(self):
    return Picture.objects.filter(garally_admition=True)

#garelly.html

{% load static %}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>Garelly</h2> <a href="{% url 'pic_upload_app:index' %}">go back home</a> {% for pic in object_list %} <h2>Uploader:{{ pic.uploader }}</h2> <img src="..{{ pic.photo.url }}" alt="pic" width="50%" height="50%"> <p>explanation</p> <br> <p>{{ pic.content }}</p> {% empty %} <p>empty</p> {% endfor %} <img src="" alt="pi"> </body> </html>

試したこと

同じような問題が生じている例が何個かあったので、書いてあったことは試した見ました（settings.pyにstatic()関数を導入）が写真だけ表示されません。他のpic.uploaderとpic.contentはhtmlでちゃんと表示されます。
画像だけが表示されません。

ここに問題に対して試したことを記載してください。

補足情報

ディレクトリ構成は次のようになっています。
|pic_upload_app|-|config|-|settings.py,urls.py|
|:--|:--:||
|||media|-|garelly-jpegfile|||
|||pic_upload_app|-|garelly.html|
|||static|
|||manage.py|

リクエストしたときに帰ってくるhtml内の{{pic.photo.url}}はつぎのように展開されているようです。（デベロッパーツールで確認）
/media/garelly/665359F0-0F9B-4A4E-B2CB-731454FB0DB5.jpeg

GET http://192.168.3.20:8080/media/garelly/665359F0-0F9B-4A4E-B2CB-731454FB0DB5.jpeg 404 (Not Found)

#レスポンスhtml

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>Garelly</h2> <a href="/">go back home</a>

<h2>Uploader:頼む</h2>
<img src="/media/garelly/665359F0-0F9B-4A4E-B2CB-731454FB0DB5.jpeg" alt="pic" width="50%" height="50%">
<img src="" alt="pi"><p>explanation</p>
<br>
<p>今度はどうだ</p>

<p>koi</p>

</body>

どなたか、よろしくおねがいします。