如何在 .liquid 上添加图像属性（shopify）

Question

大家好社区我正在修复我的主题中的代码，但我遇到了一些问题，希望有人能帮助我，

此代码显示失败：

缺少宽度和高度属性theme-checkImgWidthAndHeight

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'filter，这是告诉 Shopify 以特定分辨率渲染图像的方式。

了解有关液态图像标签的更多信息here

如何在 .liquid 上添加图像属性（shopify）

How to add image attributes on .liquid (shopify)

html

attributes

liquid

shopify