Изображение не действует как ссылка - PullRequest
Новая
       5

Изображение не действует как ссылка

0 голосов
/ 08 ноября 2019

Я завернул свой <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>

enter image description here

1 Ответ

2 голосов
/ 08 ноября 2019

Лучший способ отладить это - проверить сгенерированный HTML в инструментах разработчика вашего браузера. Если вы сделаете это, вы обнаружите, что порядок тегов не тот, который вы ожидаете ...

Это потому, что тег шаблона 

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

должен быть: 

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

Если вы пропустите as img, тег немедленно выведет элемент <img>, и, поскольку это происходит за пределами <a>, он не будет частью ссылки. Между тем, <img> в коде вашего шаблона является неработающим изображением, поскольку оно ссылается на переменную img, которая не определена.

...