为什么 Bootstrap 4 卡片图像使用 data-src 而不是 src 作为图像标签？答案

【问题标题】：Why does Bootstrap 4 card images use data-src and not src for image tags?为什么 Bootstrap 4 卡片图像使用 data-src 而不是 src 作为图像标签？
【发布时间】：2016-05-12 01:13:48
【问题描述】：

在下面的演示代码中，它使用了 data-src 但没有使用 img src。图像是如何应用的？ javascript 会以某种方式修改它吗？

http://v4-alpha.getbootstrap.com/components/card/

 <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>

【问题讨论】：

是的，它加载了 javascript 以允许延迟加载图像
谢谢@jpschroeder。但我可以看到电子商务或投资组合应用程序中使用的卡片。如果它依赖于 javascript，这不会对图像 SEO 产生负面影响吗？谷歌会在图片和替代文字之间建立联系吗？我猜速度胜过图片自然搜索。
Google 的搜索机器人无论如何都不会下载您的图片，因此从 SEO 的角度来看，只需确保您的 alt 文本准确无误（除非您确实需要它显示在 google 图片搜索中）。最重要的是速度。当然，没有什么可以阻止您直接分配自己的 src='' 属性，但如果您对依赖 javascript 感到不自在（使用 imo 也不错）

标签： twitter-bootstrap-4 bootstrap-4

【解决方案1】：

Bootstrap 4 文档使用 holder.js，请参阅 http://imsky.github.io/holder/

另见：https://github.com/imsky/holder#usage

在您的 HTML 中包含 holder.js：

Holder 将处理所有具有特定 src 属性的图像，喜欢这个：

上述标签将呈现为 300 像素宽和 200 像素的占位符像素高。

为避免控制台 404 错误，您可以使用 data-src 代替 src。

通过http://v4-alpha.getbootstrap.com/assets/js/docs.min.js包含持有者

【讨论】：

感谢您的帮助和解答！