如何加载引导缩略图图像 [英] How to load bootstrap thumbnail images

问题描述

我已经开始为项目使用Bootstrap，特别是Thumbnails组件。在文档缩略图示例上，显示以下示例代码：

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

请注意，使用 data-src 来替换< img> 标记中常见的 src 属性。

我假设要使缩略图工作，我应该使用 data-src 而不是 src 图像，但似乎并非如此。我只能通过定义 src 属性来加载图像。看来其他人也有同样的问题。

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

解决方案

我相信，引导人员使用 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 。

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:

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

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.

Is this a typo in the documentation, or did I not understand correctly how to use data-src?

解决方案

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)

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.

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.

这篇关于如何加载引导缩略图图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！