我可以在 <img> 中使用 data-src 而不是 src 属性吗？答案

【问题标题】：Can i use data-src in <img> instead of src attribut?我可以在 <img> 中使用 data-src 而不是 src 属性吗？
【发布时间】：2019-08-06 17:27:50
【问题描述】：

我们可以在<img> 中使用data-src 而不是src 属性而没有副作用吗？

您认为缺少“src”a 是否会导致 Google 不显示我们的图片？

谢谢

【问题讨论】：

data-src 不是任何 html 规范的一部分，因此只有此属性且没有 src 的 img-element 不会呈现图像并且是无效的 html。 data-src 通常用于 javascript-libraries 延迟加载图像，以在图像对用户真正可见后设置 src-attribute。
如果你要检查标记上的元素，src 属性应该在那里，否则它不会显示你的图像。

【解决方案1】：

我们可以在没有副作用的情况下使用 data-src 代替 src 属性吗？

没有。

data-src 与所有data- 属性一样，是一种为网站上的（主要）JavaScript 提供自定义数据的机制。

src 确定从哪里加载图像。

听起来您正在使用data-src 和JS 来动态填充src。虽然这样做是有原因的，但您已经看到它对 Google 的负面影响，并且您会遇到类似的问题when JavaScript fails。

使用src，即使它是您稍后覆盖的默认值。（如果您使用 JavaScript 覆盖它，请考虑使用 srcset 覆盖它是否会更好）。

【讨论】：

我们有带有的
@AtomCZ Google bot 会在尝试访问图像之前呈现页面，因此它会在此之前执行任何 JavaScript 代码。因此，所有具有延迟加载图像的网站在 Google 上仍有工作图像。
@Esko cna 您提到了 1 个使用相同延迟加载技术的站点，以便我可以在 Google Feed 上查看？谢谢