How to load bootstrap thumbnail images

Question

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?

Answer 1

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.

Answer 2

How to use it

Include holder.js in your HTML:

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

Holder will then process all images with a specific src attribute, like this one:

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

The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.

To avoid console 404 errors, you can use data-src instead of src.

Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:

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