集成lazyload图片代码遇阻：{width}占位符如何实现适配？

我正在查看网页源码学习网站设计，发现如下代码：

<img 
      class="lazyload"
      data-src="//example.com/files/image_{width}x.jpg?v=*****"
      data-widths="[180,360,540,720,900,1000]"
      data-aspectratio="1.1904761904761905"
      data-sizes="auto"
      alt=""
      
      data-image
  >

但将其集成到我的店铺网站时无法正常工作。我推测问题出在data-src中的{width}占位符，直接使用原网站的图片URL则可正常显示，请问如何实现同款功能？

这是一套响应式懒加载图片的实现逻辑，核心是靠懒加载库自动替换{width}占位符，匹配当前页面需要的最优图片尺寸，具体步骤如下：

• 引入对应懒加载库
  你需要在页面里加入支持这种响应式参数的懒加载库（比如lazysizes），它能自动识别data-widths、data-aspectratio这些属性，然后根据图片在页面上的显示宽度，把data-src里的{width}替换成data-widths里的合适数值，自动请求对应尺寸的图片：

  <script src="lazysizes.min.js"></script>
  

• 确认图片服务支持尺寸生成
  你的图片服务器或CDN必须能识别URL里的尺寸参数——比如原网站的image_{width}x.jpg格式，就是把{width}替换成180、360这类数值后，服务器能返回对应宽度、按指定宽高比裁剪好的图片。如果你的图片服务不支持这个规则，得先配置后端或CDN的图片处理能力。

• 检查标签属性和类名
  确保图片标签的class="lazyload"没被其他代码覆盖，data-image是原网站的自定义标识，用lazysizes的话可以删掉，只保留核心属性：class="lazyload"、data-src、data-widths、data-aspectratio、data-sizes、alt即可。

• 可选：自定义配置（如果需要）
  如果默认的占位符或属性名不符合你的需求，以lazysizes为例可以简单调整：

  window.lazySizesConfig = window.lazySizesConfig || {};
  // 自定义宽度参数的属性名
  window.lazySizesConfig.widthAttr = 'data-my-widths';
  // 自定义占位符替换规则
  window.lazySizesConfig.srcsetFormat = function(src, width, format) {
    return src.replace('{size}', width);
  };
  

内容的提问来源于stack exchange，提问作者Ravan