如何加载引导缩略图

Question

我已经开始在一个项目中使用 Bootstrap，尤其是缩略图组件。在thumbnails example on the documentation上，示例代码如下：

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

注意使用data-src 替换<img> 标记上通常的src 属性。

我假设要让我的缩略图正常工作，我应该使用 data-src 而不是 src 来显示图像，但事实似乎并非如此。我只能通过定义src 属性来加载图像。好像是others are having the same problem。

这是文档中的错字，还是我没有正确理解如何使用data-src？

Answer 1

我相信引导人员使用data-src 而不是src 的唯一原因是holder.js。您应该使用src 而不是data-src，因为data-src 仅用于生成特定大小示例图像的javascript 库，而src 是用于指定图像位置的普通属性（来源： W3C)

他们为什么在文档中使用 data-src？ 我想当我们访问页面时，即使是 <img src="holder.js/100x200"></img> 的语法也被库接受，就像在 holder.js documentation 中一样即使在显示图像时，它也会在图像中引发404错误，因为指定路径中没有任何文件，这很奇怪。

他们为什么把它放在文档代码中？我真的不知道。可能这是一个错误。但我确信您应该在缩略图中使用src 而不是data-src。

Answer 2

如何使用

在您的 HTML 中包含 holder.js：

<script src="holder.js"></script>

Holder 将处理所有具有特定src 属性的图像，例如：

<img src="holder.js/200x300">

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

为避免控制台 404 错误，您可以使用 data-src 而不是 src。

Holder 还包括对主题的支持，以帮助占位符融入您的布局。有 6 个默认主题：sky、vine、lava、gray、industrial 和 social。你可以像这样使用它们：

<img src="holder.js/200x300/industrial">

Answer 3

Bootstrap 在其文档中使用 Holder 作为缩略图。

the Holder github page 对此进行了很好的解释。

在您的 HTML 中包含 holder.js。 Holder 将处理具有特定 src 属性的所有图像...该标签将呈现为占位符。为避免控制台 404 错误，您可以使用 data-src 代替 src。

Answer 4

为了让这个工作，我必须在 holder 中调用 run() 函数。

我正在使用 require 加载主干视图，在我的视图中我包括持有人

var Holder = require('holderjs');

然后在内部渲染我可以运行

Holder.run();

在我的模板中我有

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img data-src="holder.js/200x200/text:hello world">
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>...</p>
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

希望对您有所帮助。

Answer 5

我也想不通，据我了解，holder.js 实际上是一个完全独立的 js 文件，充当来自 http://imsky.github.io/holder/ 的 img 占位符

data-src 用于传递给javascript，/100x200 是您希望javascript 'holder.js' 为真实img 占用的图片尺寸。

我认为这个想法是使用此 (data-src="holder.js/300x200") 进行原型设计，然后将其替换为尺寸图片 (src="Logo.png")。

Answer 6

对于寻找如何与 NPM/build 作业一起使用的未来 Google 员工，这在我的案例中很有效：

window.Holder = require('holderjs').default;