Display a placeholder image while the real image loads.
npm install --save react-background-image
import React from 'react';
import BackgroundImage from 'react-background-image';
import placeholder from './images/small.jpg';
import hdImage from './images/large.jpg';
export default function App() {
return (
<div className='main'>
<BackgroundImage
placeholder={placeholder}
src={hdImage}
className='myCustomClass'
{...otherProps}
>
<p className='some-class'>Other element</p>
<OtherReactComponent />
</BackgroundImage>
</div>
);
}
Prop | Type | Notes |
---|---|---|
src | String | HD image to load |
placeholder | String | Placeholder image to be immediately displayed |
className | String | Optional custom css class |
https://jonatanramhoj.github.io/react-background-image/
MIT © jonatanramhoj