如何使用holder.js bootstrap加载我的图像

Question

我正在使用bootstrap3构建一个带有thmbnails的产品列表页面。并且，我想使用bootstarp使用Holder.js来使用来自bootstartp whihc的缩略图<img src="holder.js/200x300"> 。我已阅读docuematation here和here。

他们都在讨论这种语法：加载js文件后。

 <div class="thumbnail">
           <img data-src="holder.js/100%x200" alt="100%x200"  class="img-thumbnail img-responsive" src="../assets/images/products/ring.jpg" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
           <div class="caption">
            <h4>Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</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>

我已经尝试检查并查看图像源的重新存储位置和方式，因为我想使用PHP中的 foreach加载它。

这里我的检查结果：

所以，正如你从图像中看到的，有一个数据：svg ... 我不明白的东西。

结束我的问题。

1. 如何使用hodelr.js
加载图片
2. 是否需要在thmbnails视图中看到所有图像的封面
3. Hodler.js可以在哪里重新制作图像，你怎么能动态地完成它。

我有以下我没看到任何 svg：generarted

{{1}}

非常感谢你！

Answer 1

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

Holder.js是一个图像占位符。它将代码渲染为图像。

将代码更改为真实图像，如下所示并设置尺寸。

<img src="you image path + image " width="200" height="300">
<img src="images/apple.jpg" width="200" height="300">