如何加载引导缩略图图像

时间：2021-03-22 00:26:19

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-src to replace the usual src attribute on the <img> tag.

注意使用data-src替换如何加载引导缩略图图像标签上通常的src属性。

I assumed that to get my thumbnails working, I should use data-src instead of src for the images, but that does not seem to be the case. I've only been able to load images by defining the src attribute. 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？

6 个解决方案

#1

32  

I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)

我相信为什么bootstrap的人使用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中使用？我想即使语法如何加载引导缩略图图像也被库接受，因为它在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 src instead data-src in thumbnails.

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

#2

23  

How to use it

Include holder.js in your HTML:

在HTML中包含holder.js：

<script src="holder.js"></script>

Holder will then process all images with a specific src attribute, 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-src instead 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个默认主题：天空，藤蔓，熔岩，灰色，工业和社交。您可以像这样使用它们：

<img src="holder.js/200x300/industrial">

#3

5  

Bootstrap uses Holder for thumbnails in its documentation.

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

It's pretty well explained on the Holder github page.

它在Holder github页面上得到了很好的解释。

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。

#4

2  

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.

希望有所帮助。

#5

2  

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”）替换它。

#6

0  

For future Googlers looking for how to use with NPM/build jobs this worked in my case:

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

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

#1

32  

I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)

我相信为什么bootstrap的人使用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中使用？我想即使语法如何加载引导缩略图图像也被库接受，因为它在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 src instead data-src in thumbnails.

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

#2

23  

How to use it

Include holder.js in your HTML:

在HTML中包含holder.js：

<script src="holder.js"></script>

Holder will then process all images with a specific src attribute, 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-src instead 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个默认主题：天空，藤蔓，熔岩，灰色，工业和社交。您可以像这样使用它们：

<img src="holder.js/200x300/industrial">

#3

5  

Bootstrap uses Holder for thumbnails in its documentation.

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

It's pretty well explained on the Holder github page.

它在Holder github页面上得到了很好的解释。

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。

#4

2  

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.

希望有所帮助。

#5

2  

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”）替换它。

#6

0  

For future Googlers looking for how to use with NPM/build jobs this worked in my case:

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

window.Holder = require('holderjs').default;
标签：

相关文章