如何加载引导缩略图图像

Question

我已经开始为项目使用Bootstrap,特别是Thumbnails组件.在文档的缩略图示例中,显示以下示例代码:

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

注意data-src用于替换标签src上的常用属性<img>.

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

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

Answer 1

我认为,之所以引导家伙正在使用的唯一原因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在缩略图.

Answer 2

如何使用它

包含holder.js在您的HTML中:

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

然后,持有者将处理具有特定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">

Answer 3

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

在Holder github页面上很好地解释了它.

在HTML中包含holder.js.然后,Holder将处理具有特定src属性的所有图像...标记将呈现为占位符.要避免控制台404错误,可以使用data-src而不是src.