How to load my images using holder.js bootstrap

Question

I am building a product listing page with thumbnails using bootstrap3. And I want to use a thumbnail from Bootstrap which in turn bootstarp also using Holder.js. I have read documentation here and also here.

They all talk about this syntax: after you load js file.

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

I have tried to inspect and look that where and how the image source are retrieved, since I want to load that using a foreach in PHP.

Here my inspection result:

So ,as you can see from the image, there is a data:svg... something which I didn't understand.

To wrap up my question:

1. How do load images using hodelr.js?
2. Is there conversion needed for all images to be seen on thumbnails view?
3. Where can Hodler.js retrieve images and how could you do it dynamically?

I have the following I didn't see any 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>

Thank you so much!

Answer 1

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

Holder.js is an image placeholders. It render the code as image.

Change your code to real image as below and set the the sizes.

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