如何在HTML模板中加载Django模型的静态文件？

1. 修正模型的上传路径函数 #

article_image_path 不需要添加 static/ 前缀，因为 STATICFILES_DIRS 已经指定了 BASE_DIR / "static" 作为静态文件根目录，上传路径应相对该目录：

def article_image_path(instance, filename):
    return f"images/article_image/{filename}"

2. 修复模板中的图片引用 #

{% static %} 标签内不能嵌套 {{}} 模板变量，正确写法是直接将 article.image.name 作为参数传入标签：

<img src="{% static article.image.name %}" alt="Article image">

如果更规范地处理用户上传内容，推荐使用Django媒体文件机制，此时模板可直接调用图片的URL属性：

<img src="{{ article.image.url }}" alt="Article image">

3. 调整Settings配置（媒体文件方案推荐） #

若采用媒体文件方案，需在 settings.py 中添加以下配置：

# 媒体文件配置
MEDIA_URL = 'media/'
MEDIA_ROOT = BASE_DIR / 'media'

同时修改模型的上传路径函数，路径相对 MEDIA_ROOT：

def article_image_path(instance, filename):
    return f"article_images/{filename}"

并在项目的 urls.py 中添加媒体文件路由：

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

urlpatterns = [
    # 你的其他路由配置
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4. 验证路径一致性 #

• 静态文件方案：确保实际图片存放在 static/images/article_image/ 目录
• 媒体文件方案：确保上传的图片存放在 media/article_images/ 目录

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