react-image-holder

Basic image

<Img src="./img/test1.jpg" />

Extra attributes

All additional properties passed into the component get added as attributes to the IMG tag (except for `width` and `height`).

<Img src="./img/test_non_existent.jpg" width="200" height="50" alt="this is the alt text" />

Placeholder

You must provide width and height when using a placeholder:

<Img src="./img/test1.jpg" width="400" height="100" usePlaceholder={true} />

Placeholder customization

You can pass through any of the properties supported by holder.js.

<Img 
  src="./img/test1.jpg" 
  width="400" 
  height="100" 
  usePlaceholder={true} 
  placeholder={{
    theme: 'lava',
    size: 50
  }} /> 

Global configuration

You can override the default settings for the usePlaceholder and placeholder properties for the component:

Img.DEFAULT_PROPS.usePlaceholder = true;
Img.DEFAULT_PROPS.placeholder = // etc.

At this point all created instances of this component will automatically use placeholders, though you can still override this setting on per-instance basis.