如何在Django的DetailView中基于外键关系显示图片？

核心问题 #

你遇到的专辑歌曲无法加载对应专辑图片的原因有两个：

1. 视图中传递的album是所有非"Single"专辑的查询集，而非当前歌曲关联的具体专辑对象，导致模板中的song in album.song_set.all判断完全失效。
2. 模板逻辑依赖错误的上下文变量，没有直接利用歌曲与专辑的外键关联关系。

具体修复步骤 #

1. 修正视图逻辑（views.py）

删除错误的上下文传递代码，因为我们可以直接通过歌曲对象访问其关联专辑：

class PlaySongView(DetailView):
    model = Song
    template_name = 'music/play_song.html'

    # 移除以下错误代码
    # def get_context_data(self, **kwargs):
    #     context = super(PlaySongView, self).get_context_data(**kwargs)
    #     context['album'] = Album.objects.exclude(title="Single")
    #     return context

2. 重构模板图片判断逻辑（play_song.html）

直接通过song.alb访问歌曲关联的专辑，根据专辑类型（是否为"Singles"）决定显示哪张图片：

{% if song.alb.title == "Singles" %}
    {% if song.picture %}
    <img src="{{ song.picture.url }}" class="min-h-64 min-w-64 md:h-96 md:w-96" alt="{{ song.title }} 封面">
    {% else %}
    <img src="{% static 'something_wrong.jpg' %}" class="min-h-64 min-w-64 md:h-96 md:w-96" alt="默认封面">
    {% endif %}
{% else %}
    {% if song.alb.picture %}
    <img src="{{ song.alb.picture.url }}" class="min-h-64 min-w-64 md:h-96 md:w-96" alt="{{ song.alb.title }} 专辑封面">
    {% else %}
    <img src="{% static 'something_wrong.jpg' %}" class="min-h-64 min-w-64 md:h-96 md:w-96" alt="默认封面">
    {% endif %}
{% endif %}

或者保持你原有的逻辑结构，修正条件判断：

{% if song.picture %}
<img src="{{ song.picture.url }}" class="min-h-64 min-w-64 md:h-96 md:w-96" alt="{{ song.title }} 封面">
{% elif song.alb.title != "Singles" and song.alb.picture %}
<img src="{{ song.alb.picture.url }}" class="min-h-64 min-w-64 md:h-96 md:w-96" alt="{{ song.alb.title }} 专辑封面">
{% else %}
<img src="{% static 'something_wrong.jpg' %}" class="min-h-64 min-w-64 md:h-96 md:w-96" alt="默认封面">
{% endif %}

额外注意事项 #

• 检查数据库中是否存在名为**"Singles"**的专辑对象（注意你视图中写的是"Single"，存在拼写不一致），确保所有单曲都正确关联到该专辑。
• 确认MEDIA_URL和MEDIA_ROOT在settings.py中配置正确，开发环境下需添加媒体文件路由：

  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  

• 确保专辑对象已正确上传图片，且图片路径无权限问题。

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