@cyf-super/lazy-image

react 图片懒加载

使用

安装

npm i @cyf-super/react-lazy-image
或
yarn add @cyf-super/react-lazy-image

应用

import { LazyImage } from '@cyf-super/react-lazy-image'

const myImg = () => {
  return (
    <LazyImage
      placeholderSrc="https://images.pexels.com/photos/11586556/pexels-photo-11586556.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
      placeholderStyle={{ width: "100%" }}
      placeholderClassName="placeholderClassName"
      src={photo.download_url}
      alt="myImg"
      className="imageClassName"
      style={{ width: "100%" }}
      key={photo.id }
    />
  )
}

属性值

• placeholderSrc：默认背景图

• placeholderStyle：背景图样式

• placeholderClassName：背景图class类

• alt：背景图别名

• src：真实图片路径

• imageClassName：真实图片class类

• style：行内样式

运行

安装依赖

yarn install

运行例子

yarn start

构建

yarn build