Html 如何加载引导程序缩略图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15645161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load bootstrap thumbnail images
提问by David Planella
I've started using Bootstrap for a project, and in particular, the Thumbnails component. On the thumbnails example on the documentation, the following sample code is shown:
我已经开始在一个项目中使用 Bootstrap，特别是 Thumbnails 组件。在文档的缩略图示例中，显示了以下示例代码：
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
Notice the use of data-srcto replace the usual srcattribute on the <img>tag.
注意data-src用于替换标签src上的常用属性<img>。
I assumed that to get my thumbnails working, I should use data-srcinstead of srcfor the images, but that does not seem to be the case. I've only been able to load images by defining the srcattribute. It seems others are having the same problem.
我认为为了让我的缩略图工作，我应该使用data-src而不是src图像，但情况似乎并非如此。我只能通过定义src属性来加载图像。似乎其他人也有同样的问题。
Is this a typo in the documentation, or did I not understand correctly how to use data-src?
这是文档中的错字，还是我没有正确理解如何使用data-src？
回答by Pigueiras
I believe that the only reason of why bootstrap guys are using data-srcinstead src, it's because of holder.js. You should use srcinstead of data-srcbecause data-srcis only used for the javascript library that generates the example images of a certain size, and srcis the normal attribute for specifying the location of an image (Source: W3C)
我认为，之所以引导家伙正在使用的唯一原因data-src，而不是src，这是因为中holder.js。您应该使用src而不是data-src因为data-src仅用于生成特定大小示例图像的javascript库，并且src是指定图像位置的普通属性（来源：W3C）
Why are they using in the documentation data-src?I suppose that even the syntax <img src="holder.js/100x200"></img>is accepted by the library as it is in the holder.js documentation, when we access to the page it throws a 404 error in the image even when the image is displaying, because there is not any file in the specified path, what it's weird.
为什么他们在文档中使用data-src？我想即使<img src="holder.js/100x200"></img>是在holder.js 文档中的语法也被库接受，当我们访问该页面时，即使图像正在显示，它也会在图像中抛出 404 错误，因为在指定的路径，有什么奇怪的。
Why do they put that in the documentation code?I really don't know. Probably it's a mistake. But I am sure that you should use srcinstead data-srcin thumbnails.
为什么他们把它放在文档代码中？我真的不知道。大概是个错误。不过，我相信，你应该使用src，而不是data-src在缩略图。
回答by wrcode
How to use it
如何使用它
Include holder.jsin your HTML:
包含holder.js在您的 HTML 中：
<script src="holder.js"></script>
Holder will then process all images with a specific srcattribute, like this one:
然后 Holder 将处理具有特定src属性的所有图像，如下所示：
<img src="holder.js/200x300">
The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.
上面的标签将呈现为一个 200 像素宽和 300 像素高的占位符。
To avoid console 404 errors, you can use data-srcinstead of src.
为避免控制台 404 错误，您可以使用data-src代替src。
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:
Holder 还包括对主题的支持，以帮助占位符融入您的布局。有6个默认的主题：sky，vine，lava，gray，industrial，和social。您可以像这样使用它们：
<img src="holder.js/200x300/industrial">
回答by Dylan Kinnett
Bootstrap uses Holder for thumbnails in its documentation.
Bootstrap 在其文档中使用 Holder 作为缩略图。
It's pretty well explained on the Holder github page.
Holder github page上对此进行了很好的解释。
Include holder.js in your HTML. Holder will then process all images with a specific src attribute... The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
在 HTML 中包含 holder.js。然后 Holder 将处理具有特定 src 属性的所有图像...标签将呈现为占位符。为了避免控制台 404 错误，您可以使用 data-src 而不是 src。
回答by Dave Collier
In order for me to get this to work, I had to call the run() function in holder.
为了让这个工作，我必须在 holder 中调用 run() 函数。
I am using require to load backbone views, inside my view I include holder
我正在使用 require 来加载主干视图，在我的视图中我包含了持有人
var Holder = require('holderjs');
Then inside render I can run
然后在渲染内部我可以运行
Holder.run();
And in my template I have
在我的模板中我有
<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>
Hope that helps.
希望有帮助。
回答by Guest
I couldn't figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
我也想不通，据我所知，holder.js 实际上是一个完全独立的 js 文件，充当来自http://imsky.github.io/holder/的 img 占位符
data-src is used to pass to the javascript, the /100x200 is the dimension of the picture you want the javascript 'holder.js' to take up for the real img.
data-src 用于传递给 javascript，/100x200 是您希望 javascript 'holder.js' 为真实 img 占用的图片尺寸。
I think the idea is to prototype using this (data-src="holder.js/300x200") and then replace it with sized pictures (src="Logo.png") afterwards.
我认为这个想法是使用这个 (data-src="holder.js/300x200") 原型，然后用大小的图片 (src="Logo.png") 替换它。
回答by idea34
For future Googlers looking for how to use with NPM/build jobs this worked in my case:
对于寻找如何使用 NPM/构建作业的未来 Google 员工来说，这在我的情况下有效：
window.Holder = require('holderjs').default;
