如何加载引导缩略图

Posted 2023-03-05

【中文标题】如何加载引导缩略图

【英文标题】：How to load bootstrap thumbnail images

【发布时间】：2013-03-16 17:25:29

【问题描述】：

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

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

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

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

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

【问题讨论】：

我挖了一点，发现从 bootstrap 2.2.2 holder.js 已经被 placehold.it 取代了

Bootstrap thumbnail list is not showing thumbnails的可能重复

【参考方案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。

【讨论】：

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

【参考方案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">

【讨论】：

所以你必须单独包含 holder.js 而不是 Bootstrap 中包含的内容，并且文档中没有解释？

是的，holder 是一个单独的框架，你将负责加载。github.com/imsky/holder

【参考方案3】：

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

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

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

【参考方案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>

希望对您有所帮助。

【参考方案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")。

【参考方案6】：

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

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