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
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
I believe that the only reason of why bootstrap guys are using
src, it’s because of
holder.js. You should use
src instead of
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
data-src in thumbnails.
How to use it
holder.js in your HTML:
Holder will then process all images with a specific
src attribute, like this one:
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
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes:
social. You can use them like this:
Bootstrap uses Holder for thumbnails in its documentation.
It’s pretty well explained on the Holder github page.
Include holder.js in your HTML. Holder will then process all images with a specific src attribute… The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
In order for me to get this to work, I had to call the run() function in holder.
I am using require to load backbone views, inside my view I include holder
var Holder = require('holderjs');
Then inside render I can run
And in my template I have
<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/200x200/text:hello world"> <div class="caption"> <h3>Thumbnail label</h3> <p>...</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>
Hope that helps.
I couldn’t figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
I think the idea is to prototype using this (data-src=”holder.js/300×200″) and then replace it with sized pictures (src=”Logo.png”) afterwards.