图片懒加载场景下image_tag宽高定义的输入位置咨询

你有两种方式添加图片的宽高定义，具体看你是直接写HTML的<img>标签还是用Liquid的image_tag生成标签：

1. 直接在现有<img>标签中添加宽高属性 #

你可以直接在当前的<img>标签里插入width和height属性，用已有的block.settings.image_1.width和block.settings.image_1.height变量填充值即可，比如放在loading="lazy"后面：

<img loading="lazy" 
     width="{{ block.settings.image_1.width }}" 
     height="{{ block.settings.image_1.height }}"
     class="lazy photoswipe__image js-photoswipe__zoom"
     data-index="{{ image_index }}"
     data-photoswipe-src="{{ block.settings.image_1.src | img_url: '1600x1600' }}"
     data-photoswipe-width="{{ block.settings.image_1.width }}"
     data-photoswipe-height="{{ block.settings.image_1.height }}"
     data-src="{{ img_url }}"
     data-widths="[180, 360, 540, 720, 900, 1080, 1500]"
     data-aspectratio="{{ block.settings.image_1.aspect_ratio }}"
     data-sizes="auto"
     alt="{{ block.settings.image_1.alt }}">

这样浏览器能提前知晓图片尺寸，预留对应空间，避免懒加载时出现布局偏移。

2. 改用Liquid的image_tag生成图片标签 #

如果你想用Shopify的image_tag标签生成<img>元素，直接把宽高作为参数传入标签即可：

{% image_tag block.settings.image_1.src,
  loading: 'lazy',
  width: block.settings.image_1.width,
  height: block.settings.image_1.height,
  class: 'lazy photoswipe__image js-photoswipe__zoom',
  data-index: image_index,
  data-photoswipe-src: block.settings.image_1.src | img_url: '1600x1600',
  data-photoswipe-width: block.settings.image_1.width,
  data-photoswipe-height: block.settings.image_1.height,
  data-src: img_url,
  data-widths: "[180, 360, 540, 720, 900, 1080, 1500]",
  data-aspectratio: block.settings.image_1.aspect_ratio,
  data-sizes: "auto",
  alt: block.settings.image_1.alt
%}

image_tag会自动生成带width和height属性的<img>标签，同时保留你设置的其他自定义属性。

内容的提问来源于stack exchange，提问作者federico Da Sie