Django无法向前端模板提供图片问题排查求助

我正在创建一个包含图片上传功能的表单，Admin后台能正常上传图片，后台及media/images文件夹中也能看到图片，但图片无法在前端页面显示，自定义的更新页面中也看不到图片附件。已尝试网上所有能找到的解决方案，问题仍未解决，求排查操作错误点。

Models.py 代码 #

class BlogEntry(models.Model):
    id = models.AutoField(primary_key=True)
    date = models.DateTimeField(null=True, auto_now_add=True)
    name = models.CharField(null=True, max_length=100)
    place = models.CharField(null=True, max_length=100)
    time = models.CharField(null=True, max_length=100)
    entry = models.TextField(null=True, max_length=3000)
    your_img = models.ImageField(null=True, blank=True, upload_to='images/')

    blog_objects = models.Manager()

    def __str__(self):
        return f"{self.date} -- {self.name} -- {self.place}"

Forms.py 代码 #

class BlogForm(ModelForm):
    class Meta:
        model = BlogEntry
        fields = ['name', 'place', 'time', 'entry',  'your_img']

        labels = {
            "name": "Your name:",
            "place": "Where?",
            "time": "When?",
            "entry": "Your adventure:",
            "your_img": "Upload image:",
        }

        widgets = {
            'name': forms.TextInput(attrs={'class': 'form-control', }),
            'place': forms.TextInput(attrs={'class': 'form-control', }),
            'time': forms.TextInput(attrs={'class': 'form-control', }),
            'entry': forms.Textarea(attrs={'class': 'form-control', "rows": "3"}),
         }

Views.py 代码 #

def blog_index(request):
    form = BlogForm(request.POST or None, request.FILES or None)
    if request.method == "POST":
        if form.is_valid():
            form.save()
            return redirect('blog_index')
    all_entries = BlogEntry.blog_objects.all().values().order_by('-id')
    return render(request, 'blog.html', {'form': form, 'all_entries': all_entries})


def update_blog(request, blog_id):
    entry = BlogEntry.blog_objects.get(pk=blog_id)
    form = BlogForm(request.POST or None, request.FILES or None, instance=entry)
    if form.is_valid():
        form.save()
        return redirect('blog_index')

    return render(request, 'blog_update.html', {'form': form, 'entry': entry})

App 下的 Urls.py 代码 #

urlpatterns = [
    path('first/', views.first, name='first'),
    path('delete/<int:player_id>', views.delete, name='delete'),
    path('third/', views.third, name='third'),
    path('second/<int:player_id>', views.second, name='second'),
    path('blog_index', views.blog_index, name='blog_index'),
    path('hello', views.hello, name='hello'),
    path('update_blog/<int:blog_id>', views.update_blog, name='update_blog'),
    path('delete_blog/<int:blog_id>', views.delete_blog, name='delete_blog'),
    path('', views.index, name='index'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Project 下的 Urls.py 代码 #

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

Settings.py 代码 #

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'my_web/static', ), ) 
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
DEBUG=True                
ALLOWED_HOSTS= []   

# 尝试过把DEBUG改成False，ALLOWED_HOSTS设为['*']，但问题依旧

前端 HTML 代码 #

{% for entry in all_entries %}

<div class="p-1 mt-3 border-start border-warning border-3 h-auto d-inline-block">
  <div class="entry">
    <div class="mb-5 px-4">
      <div class="w-100 d-flex  text-black-50">
        <div class="px-2 pb-2 fw-light fst-italic" id="author">#{{entry.name}}</div>
        <div class="px-2 pb-2 fw-light fst-italic" id="time">#{{entry.time}}</div>
        <div class="px-2 pb-2 fw-light fst-italic" id="where">#{{entry.place}}</div>
        <div class="px-2 pb-2 fw-light fst-italic" id="hashtag">#childhood #amazing #gardens</div>
      </div>
      <div class="" style="text-align: justify;"><img src=" {{entry.your_img.url}}" class="w-25 mx-3 float-start" alt="your photo"> {{entry.entry}}

        <br>
      </div>
      <div style="width: 4em; font-size: 14px;" class="bg-warning mt-4 p-1 d-inline-block text-center text-danger" id="btn_edit"><a href="{% url 'update_blog' entry.id %}">
                        Edit</a>
      </div>
      <div style="width: 4em; font-size: 14px " class="bg-danger mt-4 p-1 d-inline-block text-center" id="btn_delete"><a href="{% url 'delete_blog' entry.id %}">
                        Delete</a>
      </div>
    </div>
  </div>
</div>

{% endfor %}

1. 核心问题：视图中使用.values()导致模型属性丢失 #

在blog_index视图中，all_entries = BlogEntry.blog_objects.all().values().order_by('-id')使用了.values()方法，该方法返回的是字典形式的QuerySet，而非BlogEntry模型对象。字典中仅包含字段的原始值（比如your_img存储的是字符串路径），没有ImageField自带的url属性，因此前端调用entry.your_img.url会失效。

修复方法：
去掉.values()，直接获取模型对象：

all_entries = BlogEntry.blog_objects.all().order_by('-id')

2. 前端图片路径存在多余空格 #

HTML中<img src=" {{entry.your_img.url}}"的src属性开头有多余空格，会导致浏览器解析路径错误（比如变成 /media/images/xxx.jpg，多了一个前置空格）。

修复方法：
移除空格，改为：

<img src="{{entry.your_img.url}}" class="w-25 mx-3 float-start" alt="your photo">

3. 处理图片为空的边界情况 #

如果存在未上传图片的博客条目，直接调用entry.your_img.url会抛出异常，建议增加判断：

{% if entry.your_img %}
    <img src="{{entry.your_img.url}}" class="w-25 mx-3 float-start" alt="your photo">
{% endif %}

4. 更新页面图片显示检查 #

自定义更新页面blog_update.html中，确保表单正确渲染文件字段，并且如果要显示现有图片，需要手动添加图片标签：

{% if entry.your_img %}
    <img src="{{entry.your_img.url}}" alt="Current image" class="mb-2">
{% endif %}
{{ form.your_img }}

内容的提问来源于stack exchange，提问作者n_che