Django：显示上传图片的问题

Question

我正在通过 Django 建立一个照片博客，它有一个非常基本的结构： 1）列表页：每个帖子都有封面图片 2）多个详细页面对应：每个页面包含多张图片。 在列表页，一切都很好，封面图片显示正确，但对于详细页面，我从django admin上传的图片不会显示，尽管它们可以在本地文件夹\media中找到。我检查了 Chrome 中的页面，我得到了这个：。我很困惑。 非常感谢您的时间和帮助。

结构：

connect-src 'self' http://example.com;

models.py

lyv_dev #project name
    --settings.py
    --urls.py
media
    --upload1.jpg
    --upload2.jpg
    --upload3.jpg
    -- ...
project #app name
    -- templates
       --projects
         -- base.html
         -- list.html
         -- detail.html
    -- urls.py
    -- admin.py
    -- views.py
static
    -- css
       -- style.css
db.sqlite3
manage.py

admin.py

from django.db import models
from django.urls import reverse

# models project
class Project(models.Model):
    title = models.CharField(max_length = 250)
    slug = models.SlugField(max_length = 250, unique_for_date = 'publish')
    text = models.TextField()
    year = models.IntegerField(default = 2020)
# couv: this is a cover picture
    couv = models.FileField(blank=True)
    height = models.IntegerField(default=0)
    weidth = models.IntegerField(default=0)
    
    class Meta:
        ordering = ('-publish', )

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('projects:project_detail', args=[self.slug])

# Images related with project
class ProjectImage(models.Model):
    project = models.ForeignKey(Project, on_delete = models.CASCADE, related_name='projectimages')
    images = models.FileField()

    def __str__(self):
        return self.project.title

settings.py

from django.contrib import admin
from .models import Project, ProjectImage

class ProjectImageAdmin(admin.TabularInline):
    model = ProjectImage

@admin.register(Project)
class ProjectAdmin(admin.ModelAdmin):
    list_display = ('title', 'slug', 'publish', 'status')
    list_filter = ('status', 'publish')
    search_fields = ('title', 'text')
    prepopulated_fields =  {'slug':('title',)}
    date_hierarchy = 'publish'
    ordering = ('status', 'publish')
    inlines = [ProjectImageAdmin]

    class Meta:
        model = Project
   
@admin.register(ProjectImage)
class PostImageAdmin(admin.ModelAdmin):
    pass

urls.py（在 django 项目文件夹中）

STATIC_URL = '/static/'
STATICFILES_DIRS = [str(BASE_DIR.joinpath('static'))]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

urls.py（在 django 应用文件夹中）

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('projects.urls', namespace='projects')), 
]
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

views.py

  from django.urls import path
    from .import views
    from .views import ProjectLisView
    
    app_name = 'projects'
    
    urlpatterns = [
        path('', ProjectLisView.as_view(), name='projects_list'),
        path('projects/<slug:project>/', views.project_detail, name='project_detail'), 
    ]

list.html

from django.shortcuts import render, get_object_or_404
from .models import Project, ProjectImage
from django.views.generic import ListView

class ProjectLisView(ListView):
    model = Project
    template_name = 'projects/list.html'
    context_object_name = 'projects'


def project_detail(request, project):
    project = get_object_or_404(Project, slug=project, status='published')
    images = project.projectimages.all()
    return render(request, 'projects/detail.html', {'project':project, 'images':images})

detail.html

{% extends "projects/base.html" %}

{% block content %}
    {% for project in projects %}
        <p class="title"><a href="{{ project.get_absolute_url }}">{{project.title}}</a></p>
        <div><img src="{{ project.couv.url }}" alt=""></div>
    {% endfor %}
{% endblock %}

base.html

{% extends "projects/base.html" %}

{% block content %}
    <p>this is a detail page</p>
    {{ project.title }}
    {{ project.year }}
    <p>{{ project.width }} x {{ project.height }} mm </p>
    {% for image in images %}
    <div><img src="{{ images.url }}" alt=""></div>
    {% endfor %}
{% endblock %}