KnockoutJS中srcset属性绑定失效，如何正确实现绑定？

你遇到的问题核心是绑定表达式的语法错误——Knockout无法正确解析不完整的绑定代码，导致<source>标签的srcset属性没能被正确生成。先来看你原代码里的具体问题：

• 两个<source>标签的data-bind中，attr: { srcset: ...都缺少了闭合的}，同时data-bind属性的结尾引号也没写完整
• <img>标签的data-bind同样存在缺少闭合}和引号的问题

修正后的完整代码 #

<picture>
  <source 
    data-bind="attr: { srcset: require.toUrl('/Vendor_Module/images/mobile-version.png') }" 
    media="(max-width: 767px)" 
  />
  <source 
    data-bind="attr: { srcset: require.toUrl('/Vendor_Module/images/desktop-version.png') }" 
  />
  <img 
    data-bind="attr: { src: require.toUrl('/Vendor_Module/images/desktop-version.png') }" 
    alt="图片描述文本"
  />
</picture>

关键说明 #

1. 语法完整性是核心：Knockout的绑定表达式必须是合法的JavaScript语法，attr绑定的对象必须用{}完整包裹，data-bind属性的引号也必须正确闭合，否则Knockout会直接跳过该绑定的解析。
2. 为什么<img>的src能生效？
   从你提供的生成标记来看，<img>的src是直接渲染出来的，这大概率是因为你使用的模板引擎（比如Magento模板）在Knockout解析之前，就把require.toUrl的结果直接替换到了HTML中；而<source>标签因为语法错误被Knockout忽略，所以srcset没有被处理。

修正语法后，Knockout就能正常解析attr绑定，为<source>标签生成对应的srcset属性了。

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