Question

我已经开始为项目使用Bootstrap，特别是Thumbnails组件。在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替换src代码上的常用<img>属性。

我认为要让我的缩略图正常工作，我应该使用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>

然后，持有者将处理具有特定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.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 5

为了让我能够使用它，我必须在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 6

对于寻找如何使用NPM /构建作业的未来Google员工，这在我的案例中起作用：

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

如何加载引导缩略图图像

6 个答案:

如何使用