The image display component implemented by the img element adds lazy loading and default bottom-up image display functions compared to the img element.
$ npm install @x.render/render-picture --save
import Picture from "@x.render/render-picture";
const App = () => {
return (
<div>
<div style={{ height: "130vh" }}></div>
<Picture
lazyload
style={{
width: 20,
height: 20,
}}
src="https://gw.alicdn.com/imgextra/i1/O1CN01wMWLIb1Yd9CUKQLuE_!!6000000003081-0-tps-1500-1444.jpg"
placeholder="https://gw.alicdn.com/imgextra/i2/O1CN01AbPrpW1iBniCuIeJH_!!6000000004375-2-tps-200-200.png"
/>
</div>
);
};
export default App;
Name | Type | Default | Required | description |
---|---|---|---|---|
src | string |
- | true | The address of the picture resource |
placeholder | string |
- | false | Image resource placeholder |
lazyload | boolean |
false | false | Whether to enable lazy loading (when the img element is visible, load the image) |