Simple example of usage

You must include holder.js:

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

And display the image:

<img src="holder.js/WIDTHxHEIGHT">

"WIDTH" and "HEIGHT" replace to your actual sizes. As example, display the image size of 200 in width and 100 pixels in height:

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

Additional parameters

Displaying square image (for example, the width and height are 200 pixels):

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

Displaying an image with the size as a percentage:

<img src="holder.js/100%x50%">

You can also combine the image size in pixels and percentage:

<img src="holder.js/100%x100">

Automatic image resizing:

<img src="holder.js/200x200/auto">

To avoid errors in console you can use data-src instead of src:

<img data-src="holder.js/200x100">

Themes for images

holder.js has 6 themes: sky, vine, lava, gray, industrial, social

An example of using "sky" theme:

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

Also you can use a random theme:

<img data-src="holder.js/300x200/random">

Text on image

You can use any text with the operator "text":

<img data-src="holder.js/200x200/text:devreadwrite.com">

holder.js automatically adds a line break. To control a line break, use \n:

<img data-src="holder.js/200x200/text:my site \n devreadwrite.com">

Setting font for the text:

<img data-src="holder.js/200x200/text:my site \n devreadwrite.com/font:Helvetica">

Color of the text and (or) background

Example of image with black background and white text:

<img data-src="holder.js/100x200/#000:#fff">

More info: https://github.com/imsky/holder