图片标签使用data-srcset而不是srcset

Question

我当前正在验证HTML并收到错误消息，因为我的图片标签使用data-srcset而不是srcset。我的问题是，如果我使用data-srcset，是否必须对有效的HTML使用srcset属性？看起来是这样。

示例：

<picture>
  <source data-srcset="assets/media/images/attorneys/img-attorney.webp" type="image/webp">
  <source data-srcset="assets/media/images/attorneys/img-attorney.png" type="image/jpg">
  <img src="assets/media/images/attorneys/img-attorney.png" class="lazy" alt="Attorney"> 
</picture>

Answer 1

是； srcset is mandatory，并且即使您用相同的名称替换了data-srcset属性，标记也将无法验证。为了进行验证，自定义数据属性不能替代同名的标准属性；它们被视为自定义且被忽略。

但是，如果出于自己的原因打算使用data-srcset替代，则可以在HTML中编写标准的srcset属性，并在事件发生后使用JavaScript换出它。验证程序不会看到这种情况，只会在源标记中看到srcset。如果您具有依赖于此自定义数据属性的客户端脚本，则执行替换操作后，它们可能需要等待或监听。