28

我已经开始在一个项目中使用 Bootstrap，尤其是 Thumbnails 组件。在文档的缩略图示例中，显示了以下示例代码：

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

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

我认为要让我的缩略图正常工作，我应该使用data-src而不是src图像，但情况似乎并非如此。我只能通过定义src属性来加载图像。似乎其他人也有同样的问题。

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

4

6 回答 6

32

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

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

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

于 2013-03-26T22:35:02.653 回答
23

如何使用它

holder.js在您的 HTML 中包含：

<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">
于 2013-07-17T07:21:01.467 回答
5

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

Holder github page上有很好的解释。

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

于 2013-08-19T19:42:24.543 回答
2

为了让这个工作，我不得不在 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>

希望有帮助。

于 2014-01-09T22:04:28.460 回答
2

我也想不通，据我了解 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") 替换它。

于 2013-06-25T06:53:40.450 回答
0

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

window.Holder = require('holderjs').default;
于 2018-01-20T17:46:52.613 回答