如何加载Bootstrap缩略图图像

Question

我开始在一个项目中使用Bootstrap，特别是缩略图组件。在文档中的缩略图示例上，展示了以下示例代码：

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

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

我原以为要让我的缩略图工作，应该使用data-src而不是src来加载图片，但事实并非如此。只有通过定义src属性才能加载图像。似乎其他人也遇到了同样的问题。

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

- David Planella

---

我进行了一些调查，发现从bootstrap 2.2.2开始，holder.js已被placehold.it所取代。 - Rohit Deshmukh

可能是重复的问题：Bootstrap缩略图列表未显示缩略图 - Pigueiras

Answer 1

我认为bootstrap团队使用data-src而不是src的唯一原因，是因为holder.js。你应该使用src而不是data-src，因为data-src仅用于生成特定大小示例图像的javascript库，而src是指定图像位置的常规属性（来源：W3C）。

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

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

- Pigueiras

---

它也适用于bootstrap 3中的data-src。关键是要下载库并将其添加到我们的项目中。https://github.com/imsky/holder - andilabs

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">

- wrcode

---

所以你必须单独包含holder.js，而这并没有在文档中解释清楚？ - bafromca

是的，holder是一个独立的框架，您需要负责加载它。https://github.com/imsky/holder - Dave Collier

Answer 3

Bootstrap在其文档中使用Holder来显示缩略图。

在Holder的github页面上已经很好地解释了这个东西。

将holder.js包含到你的HTML中，Holder将处理带有特定src属性的所有图片...该标记将呈现为占位符。为避免控制台404错误，可以使用data-src而不是src。

- Dylan Kinnett

Answer 4

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

我正在使用require来加载backbone视图，在我的视图中包含holder。

var Holder = require('holderjs');

在render函数中，我可以运行如下代码。

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>

希望这有所帮助。

- Dave Collier

Answer 5

我也不能完全理解，据我所知，holder.js是一个完全独立的JavaScript文件，用作图片占位符，可以从http://imsky.github.io/holder/获取。

data-src 用于传递给 JavaScript 的内容，/100x200 是你想要 JavaScript 'holder.js' 为真正的图片使用的尺寸。

我认为这个想法是使用此功能进行原型设计（data-src="holder.js/300x200"），然后在之后用大小合适的图片替换它（src="Logo.png"）。

- Guest

Answer 6

对于未来在寻找如何在NPM/构建作业中使用的Googlers，这在我的情况下有效：

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

- idea34