react-lazyloadcomponent-image

```javascript render() { const { images, list } = this.state; return ( <div> <ReactLazyLoadComponent> { images.map(item => { return <div style={ { textAlign: 'center' } } key={ item }><img data-src={ item }

Usage no npm install needed!

<script type="module">
  import reactLazyloadcomponentImage from 'https://cdn.skypack.dev/react-lazyloadcomponent-image';
</script>

README

demo

render() {
        const { images, list } = this.state;
        return (
            <div>
                <ReactLazyLoadComponent>
                    { images.map(item => {
                        return <div style={ { textAlign: 'center' } } key={ item }><img data-src={ item }
                                                                                        height={ 400 } alt=""/>
                        </div>;
                    }) }
                </ReactLazyLoadComponent>
                <ReactLazyLoadComponent>
                    {
                        list.map(item => {
                            return <div style={ { textAlign: 'center' } } key={ item }><img data-src={ item } src={ defaultImg }
                                                                                            height={ 400 } alt=""/>
                            </div>;
                        })
                    }
                </ReactLazyLoadComponent>
            </div>
        );
    }

有data-src属性的img具有懒加载效果，如果同时设置src属性，那么src属性的图片会作为默认图片显示，data-src为最终显示图片