React 圖片懶加載

// 相關鏈接 https://www.npmjs.com/package/react-lazyload
import React from 'react'
import { Card } from 'antd';
import LazyLoad from 'react-lazyload';   // 懶加載
const { Meta } = Card;

export default class extends React.PureComponent {
    render() {
        const { data } = this.props
        return (
            <div className='card'>
                <Card
                    hoverable
                    cover={
                        <LazyLoad scrollContainer='section' overflow={true} height={200}>
                            <img alt="example" src={data.image} />
                        </LazyLoad>
                    }
                >
                    <Meta title={data.title} description={'¥' + data.price} />
                </Card>

            </div>
        )
    }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章