react-ui-lazyload-responsive-image

Lazyload Image

Demo

npm install react-ui-lazyload-responsive-image

import LazyResponsiveImage from 'react-ui-lazyload-responsive-image';

<LazyResponsiveImage {...{
    dataSets: {
        0: { src: "https://fakeimg.pl/250x600/", width: 250, height: 600 },
        1024: { src: 'https://fakeimg.pl/1024x500/', width: 1024, height: 500 }
    },
    alt: '123'
}}/>

Whats the image width and height doing? Create empty box when image is not visiable

name	description	type	oneof	default
dataSets	a set of screen width store image information	object
width or height	used to create the padding box behind the image	Integer
alt	the description of image	string