图片不像 link

Question

我已将我的 <img> 包装在锚标记中，但它不像 link。但是 <p> 充当 link。我如何获得它，这样我就不需要 <p> 标签并且图像仍然像 link 一样工作？

目前鼠标悬停在图片上没有变化

<div class="container">
  {% for item in page.client_images.all %} {% image item.image fill-150x150-c100 %}
  <a href="{{ item.caption }}" style="display:block;">
    <img src="{{ img.url }}" class="item" alt="{{ img.alt }}">
    <p>{{ item.caption }}</p>
  </a>

  {% endfor %}
</div>

Answer 1

调试此问题的最佳方法是在浏览器的开发人员工具中检查生成的 HTML。如果你这样做，你会发现标签的顺序不是你所期望的...

这是因为模板标签

{% image item.image fill-150x150-c100 %}

应该是：

{% image item.image fill-150x150-c100 as img %}

如果您省略 as img，标签将立即输出 <img> 元素，并且由于这是在 <a> 之外发生的，因此它不会成为link。同时，模板代码中的 <img> 是损坏的图像，因为它引用未定义的变量 img。

图片不像 link

Image is not acting like a link

html

css

django

wagtail