Django：在父模型的详细视图模板中显示外键模型

Posted 2023-02-24

【中文标题】Django：在父模型的详细视图模板中显示外键模型

【英文标题】：Django: displaying foreign key model in parent model's detail view template

【发布时间】：2020-02-02 02:34:33

【问题描述】：

我有以下两种型号：

class SpecimenImage(models.Model):
   image = ImageField(upload_to='images/')
   usi_image = models.ForeignKey('SpecimenRecord', on_delete=models.SET_NULL, null=True, blank=True, verbose_name='Unique Specimen Identifier')
   ...

class SpecimenRecord(models.Model):
   usi = models.CharField(primary_key=True, max_length=20, verbose_name='Unique Specimen Identifier')
   species = models.ForeignKey(Species, on_delete=models.SET_NULL, null=True, blank=True)
   locality = models.ForeignKey(Locality, on_delete=models.SET_NULL, null=True, blank=True)
   date = models.DateField(null=True, blank=True)
   collector = models.ManyToManyField(Collector, verbose_name='Collector(s)', null=True, blank=True)
   ...

我有SpecimenRecord 的通用详细视图：

...
class SpecimenDetailView(generic.DetailView):
    model = SpecimenRecord

这里是 urls.py:

...
urlpatterns = [
    ...
    path('specimen/<str:pk>', views.SpecimenDetailView.as_view(), name='specimen-detail'),
    ]

我的问题是，如何在 html 模板中显示和循环与单个 SpecimenRecord 对象关联的所有 SpecimenImage 实例？我可以通过使用 specimenrecord.usi 等轻松显示每个SpecimenRecord 的信息，但我不知道如何显示每个图像。

我已尝试使用 MDN 网站上的信息获取通用详细视图 (https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views)：

% for copy in book.bookinstance_set.all %
  <!-- code to iterate across each copy/instance of a book -->
% endfor %

这是我在模板specimenrecord_detail.html中尝试的代码：

% extends "base.html" %
% load thumbnail %

% block content %
...
  % for copy in specimenrecord.specimenimage_set.all %
    <div class="gallery">
      <img src="% thumbnail copy.image '1920' as im % im.url % endthumbnail %" 
        srcset="
          % thumbnail copy.image '544' as im %   im.url   im.x w% endthumbnail %,
          % thumbnail copy.image '768' as im %   im.url   im.x w% endthumbnail %,
          % thumbnail copy.image '992' as im %   im.url   im.x w% endthumbnail %,
          % thumbnail copy.image '1200' as im %   im.url   im.x w% endthumbnail %,
          % thumbnail copy.image '1920' as im %   im.url   im.x w% endthumbnail %"
        
        sizes="100vw"
      />
    </div>
  % endfor %
% endblock %

但是，此代码生成了一个空的 <div>。我做错了什么？

【问题讨论】：

这是正确的代码，假设您的模型与您显示的完全一样，并且您没有在 ForeignKey 上设置related_name。您确定该标本记录有与之关联的图像吗？

@DanielRoseman 是的，我上传了两张图片来测试我的模型。我有另一个用于标本图像的 html 模板，它只是一个通用列表视图，它们在那里显示得很好。所以我不确定我还能错过什么。

【参考方案1】：

在玩弄了代码之后，我找到了解决方案。通过将下面的代码包裹在<img src> 周围，图像会出现在 div 中：

<a target="_blank" href=" copy.image.url ">
  <img src=.....>
</a>

（我不确定为什么会这样，但我很高兴我得到了我想要的结果。）