Django项目中无法展示Contact模型图片，如何解决？

以下是针对性的修复步骤：

1. 修正模板中的图片路径 #

在contact_detail.html中，图片的src需要使用{{ object.photo.url }}获取完整可访问URL，而非直接输出{{ object.photo }}（后者仅为文件相对路径）。同时建议增加图片存在性判断，避免无图片时显示无效占位：

<ol>
    <b>{{object.name}}</b><br>
    {% if object.photo %}
        Photo: <img src="{{ object.photo.url }}" width="55%">
    {% else %}
        No photo uploaded
    {% endif %}
</ol>

2. 调整Model中ImageField的存储路径 #

将models.py中ImageField的upload_to从static/photos/改为photos/，用户上传的文件应存放在**媒体目录（MEDIA）**而非静态资源目录（STATIC）：

class Contact(models.Model):
    name = models.CharField(max_length=50, null=False, blank=False, unique=False)
    photo = models.ImageField(upload_to='photos/', null=True, blank=True)

    def __str__(self) -> str:
        return f'{self.name} {self.photo}'

3. 配置媒体文件相关参数 #

在项目的settings.py中添加或修改以下配置，指定媒体文件的存储根目录和访问URL：

import os

# 媒体文件存储根目录（项目根目录下的media文件夹）
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# 媒体文件的访问URL前缀
MEDIA_URL = '/media/'

4. 配置媒体文件的访问路由 #

在项目根目录的urls.py中添加媒体文件的路由，让Django能够正确映射媒体文件的访问请求：

from django.conf import settings
from django.conf.urls.static import serve
from django.urls import path, include

urlpatterns = [
    # 你的其他业务路由...
    # 新增媒体文件访问路由
    path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),
]

5. 确保依赖库安装 #

ImageField依赖Pillow库，若未安装则执行：

pip install pillow

后续操作 #

• 若之前已上传过图片，需手动将static/photos/下的文件迁移到media/photos/目录中；
• 重新启动Django服务，上传新图片测试详情页显示效果。

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