如何在.sliquid(shopify)上添加图像属性

Question

嗨，社区我正在修复我主题中的代码，我对此有一些问题，希望任何人都能帮助我，

该代码显示失败：

缺少宽度和高度属性血红素检查ImgWidthAndHeight

https://github.com/Shopify/theme-check/blob/main/docs/checks/img_width_and_height.md

如何将这些属性添加到代码的该部分？

<div class="about-banner__image-2">
{% if block.settings.image_2 != blank %}
<noscript>
<img src="{{ block.settings.image_2 | img_url: '600x' }}" loading="lazy" alt="{{ block.settings.image_2.alt }}" class="image-content__image">
</noscript>
<div class="image-content__image-container">
<div class="image-content__image-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image_2.aspect_ratio | times: 100}}%;">
{% assign img_url = block.settings.image_2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="image-content__image"
loading="lazy"
src="{{ block.settings.image_2 | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ block.settings.image_2.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image_2.alt | escape }}">
</div>
</div>
{% else %}
<div class="image-content__image">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>

感谢所有人！

Answer 1

不需要使用液体，但您可以简单地添加这样的过滤器：

{{ settings.favicon | image_url: width: 200 | image_tag: alt: 'My favicon', srcset: nil, class: 'css-class-1 css-class-2' }}

请注意，最后一个筛选器语法是。。。| image_tag: att1: 'value1', att2: 'value2'在这里，您可以使用宽度和高度等属性名称，就像在HTML中一样。

不要混淆| image_url: width: 200过滤器，这就是你告诉Shopify以特定分辨率渲染图像的方法。

点击此处了解更多关于液体图像标签的信息