Img

Image with low resolution support. Low res image is loaded and once high res is ready, low res is replaced with high res.

Demo

Install

yarn add @humblejs/img

Props

Name Type / Description Is Required? Default
className string

Extra class on top of default co-img
No Empty
src string

High resolution image source
Yes  
srcLowResolution string

Low resolution image source
No src value
alt string

Image alt tag
Yes  
fallback component

Fallback component when image could not be loaded. This acts as a placeholder for error.
No  
onLoad func

Callback when high-res image was successfully loaded
No  
onError func

Callback if there was problem in loading image
No  
type string (img, div)

Load <img> tag or <div> with background image tag
No img