图片不像链接

Question

我已将<img> 包裹在锚标记中，但它不像链接。但是 <p> 充当链接。如何获得它，这样我就不需要<p> 标签，并且图像仍然可以作为同一个链接工作？

当前鼠标悬停在图像上时光标没有变化

<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> 之外，它不会成为链接的一部分。同时，您的模板代码中的<img> 是一个损坏的图像，因为它引用了未定义的变量img。