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

Question

我正在使用 bootstrap3 构建带有缩略图的产品列表页面。我想使用 Bootstrap 中的缩略图，而 bootstarp 也使用 Holder.js。我已阅读文档 here 和 here。

他们都在谈论这个语法：在你加载 js 文件之后。

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

我试图检查并查看图像源的检索位置和方式，因为我想在 PHP 中使用 foreach 加载它。

这是我的检查结果：

所以，正如你从图片中看到的那样，有一个 data:svg... 我不明白的东西。

结束我的问题：

1. 如何使用 hodelr.js 加载图片？
2. 是否需要转换才能在缩略图视图中看到所有图像？
3. Hodler.js 可以在哪里检索图像？如何动态检索？

我有以下我没有看到任何svg:generated：

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

非常感谢！

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