Django跨外键关联查询ImageField的url在模板无法正常显示

你遇到这个问题的核心原因是QuerySet.values()返回的是普通Python字典，不是Django模型实例：

• 跨外键查询owner__logo时，字典里存的只是数据库中logo字段保存的纯字符串相对路径，不是ImageField自带的FieldFile对象
• 纯字符串没有.url属性，所以模板里写{{data.owner__logo.url}}会取不到值，直接渲染字符串又只有存储在库里的相对路径，没有拼接MEDIA_URL前缀，自然无法正常访问
• 额外注意：__双下划线是Django ORM的查询语法，仅用于写查询语句的场景，拿到模型实例后访问关联属性要用.点分隔，模板里写owner__logo本身就不符合实例属性访问规则。

方案1：直接查询模型实例（推荐，最省心） #

放弃用values()，直接查询模型对象，配合select_related提前加载外键关联的机构数据，避免N+1查询问题：

courses = Course.objects.filter(name__icontains=query).select_related('owner')

模板中按实例属性的访问规则写，就能正常拿到图片的完整访问路径：

{% for data in courses %}
<div>
  <h3>{{ data.name }}</h3>
  <img src="{{ data.owner.logo.url }}" alt="{{ data.owner.name }}">
  <p>所属机构：{{ data.owner.name }}</p>
</div>
{% endfor %}

方案2：必须用values()时手动拼接图片路径 #

如果你的业务场景必须返回字典结构，可以在视图层手动拼接完整的媒体文件路径，再传给模板：

from django.conf import settings

# 把QuerySet转成列表方便后续修改
courses = list(Course.objects.filter(name__icontains=query).values(
    'id','name','terms','owner__name', 'owner__logo'
))
# 遍历补全logo的完整url
for item in courses:
    if item['owner__logo']:
        item['owner_logo_full_url'] = settings.MEDIA_URL + item['owner__logo']
    else:
        item['owner_logo_full_url'] = '' # 可替换为默认占位图路径

模板中直接用你补好的字段即可，不需要再调用.url：

<img src="{{ data.owner_logo_full_url }}" alt="{{ data.owner__name }}">

方案3：用only()控制查询字段，保留实例特性 #

如果你用values()只是为了减少查询字段、提升性能，可以换成only()方法，它返回的依然是模型实例，支持所有模型字段的原生方法，同时可以指定需要查询的字段，避免加载无用数据：

courses = Course.objects.filter(name__icontains=query).select_related('owner').only(
    'id', 'name', 'terms', 'owner__name', 'owner__logo'
)

模板写法和方案1完全一致，直接用{{ data.owner.logo.url }}就能正常渲染。

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