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

Question

我正在验证我的HTML，因为我的图片标签使用的是data-srcset而不是srcset，所以出现了错误。我的问题是，如果我使用data-srcset，我是否必须使用srcset属性才能获得有效的HTML？看起来是这样。

示例：

<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

可以；即使您用相同的名称替换了data-srcset属性，如果没有它，srcset is mandatory和标记也不会生效。在验证时，自定义数据属性不能替代同名的标准数据属性；它们将被视为自定义属性并被忽略。

但是，如果您出于自己的原因打算使用data-srcset作为替代，您可以在HTML中编写标准的srcset属性，然后使用JavaScript将其交换出来。验证器不会看到这种情况的发生，只会在源标记中看到srcset。如果您的客户端脚本依赖于此自定义数据属性，则它们可能需要等待或侦听何时执行了此替换。