Django如何在单个HTML div中展示两个关联模型的全部数据

核心问题：Project模型本身无图片字段，关联图片存储在外键绑定的ProjectImage表中，需要通过Django的外键反向关联能力拿到对应数据，具体修改分两部分：

一、调整projects视图（views.py） #

原视图仅查询了Project主表数据，未预加载关联图片，直接遍历会产生N+1数据库查询问题，修改为预加载关联数据即可：

def projects(request):
    # prefetch_related 一次性预加载所有项目对应的关联图片，减少数据库查询次数
    projects = Project.objects.prefetch_related('projectimage_set').all()
    context = {"projects": projects}
    return render(request, 'projects/projects.html', context)

小提示：Django外键默认的反向关联管理器命名规则为小写关联模型名_set，如果觉得这个命名可读性差，可以在外键字段上添加related_name参数自定义，后文会给出可选优化方案。

二、调整projects.html模板 #

原模板直接调用project.image.url属于字段不存在的错误写法，需要在每个项目的卡片容器内遍历该项目绑定的所有图片，同时修正原模板里多余的闭合标签错误：

{% for project in projects %}
<div class="column">
    <div class="card project">
        <!-- 遍历当前项目下的所有关联图片 -->
        {% for project_img in project.projectimage_set.all %}
        <img class="project__thumbnail" src="{{ project_img.image.url }}" alt="{{ project.title }} 缩略图" />
        {% empty %}
        <!-- 可选：项目无图时显示默认占位图，路径替换为你自己的静态文件路径即可 -->
        <img class="project__thumbnail" src="/static/images/default-cover.png" alt="默认项目封面" />
        {% endfor %}

        <div class="card__body">
            <h3>{{ project.title }}</h3>
            <p>{{ project.describtion }}</p>
        </div>
    </div>
</div>
{% endfor %}

注意：原模板里存在一个无对应开标签的</a>闭合标签，直接删除即可，否则会导致HTML结构错乱；另外原模板用h2标签包裹描述文本不符合HTML语义，替换为p标签更合理。

可选优化（推荐） #

如果觉得projectimage_set的写法不够直观，可以修改models.py中ProjectImage的外键定义，自定义反向关联名：

class ProjectImage(models.Model):
    project = models.ForeignKey(
        Project, 
        on_delete=models.CASCADE,
        related_name="images"  # 自定义反向关联名为images
    )
    image = models.FileField(upload_to="products/")

修改完模型后执行两条命令同步数据库结构：

• python manage.py makemigrations
• python manage.py migrate

之后视图和模板里的反向关联调用就可以简化：

1. 视图预加载部分改为Project.objects.prefetch_related('images').all()
2. 模板遍历部分改为{% for project_img in project.images.all %}

内容的提问来源于stack exchange，提问作者Phil Grütter