如何正确显示存储在Django数据库中的图片到画廊页面

问题根因 #

• 模板中{% static %}标签用法错误：该标签仅接受单个路径参数，你拼接'img/'和object.image的写法不符合Django模板语法规范，无法生成正确的图片路径
• ImageField的upload_to参数配置不符合Django媒体文件管理逻辑，直接将用户上传的图片存储在静态文件目录下，会导致路径生成异常

修复方案 #

第一步：调整配置（推荐标准做法） #

Django默认将静态资源（CSS、JS、站点固定素材）和用户上传的媒体文件分开管理，先修改settings.py配置：

# settings.py
MEDIA_ROOT = BASE_DIR / "artForAll" / "media"  # 存储上传文件的本地根目录
MEDIA_URL = "/media/"  # 访问上传文件的URL前缀

再修改模型的image字段配置：

image = models.ImageField(null = True, blank = True, upload_to = "img/")

执行makemigrations和migrate同步模型变更后，新上传的图片会自动存储到media/img/目录下，已上传的旧图片手动从static/img/迁移到media/img/即可。

第二步：配置媒体文件访问路由 #

在项目根路由urls.py中添加开发环境下的媒体文件访问规则：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 原有其他路由
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

第三步：修改模板图片引用代码 #

直接调用ImageField实例自带的url属性即可生成正确的访问路径，不需要手动拼接：

<!-- 基础写法 -->
<img src="{{ object.image.url }}">

<!-- 兼容图片为空的防错写法 -->
{% if object.image %}
<img src="{{ object.image.url }}" alt="{{ object.title }}">
{% endif %}

不调整存储结构的临时修复方法 #

如果你坚持要把图片存在静态目录下，只需要修改模板的路径拼接逻辑即可：

<img src="{% static 'img/'|add:object.image.name %}">

该做法不推荐长期使用，静态文件目录仅适合存储不会被用户上传修改的固定资源，统一用媒体文件逻辑管理用户上传内容可以避免后续部署、静态资源收集时出现冲突。

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