react-universal-image v0.2.2
React Universal Image
Features
- Lazy load
- Placeholder
- Progressive image loading (as on Medium.com)
- Image error fallback
Installation
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import Image from 'react-universal-image';
const App = () => {
return (
<div>
<image
src="img-400x200.jpg"
srcSet="img-400x200.jpg 400w, img-800x400.jpg 800w"
placeholder="img-20x10.jpg"
ratio={2}
fallback="image-not-found.jpg"
className="post-image"
/>
</div>
);
};
ReactDOM.render(<App />, document.body);
Props
src
Type: String, Default: undefined, Required
Required property. Sets the src attribute of an image.
<Image src="img.jpg" />
srcSet
Type: String, Default: undefined
Sets the srcset attribute of an image.
<Image src="img-800x400.jpg" srcSet="img-400x200.jpg 400w, img-800x400.jpg 800w" />
placeholder
Type: String/Node, Default: undefined
Specify a placeholder image URL or Component for lazy loaded image.
<Image src="img-800x400.jpg" placeholder="img-20x10.jpg" />
<Image src="img-800x400.jpg" placeholder="data:image/jpeg;base64,/..." />
<Image src="img-800x400.jpg" placeholder={<span>loading...</span>} />
blur
Type: Number, Default: 3
Specify a blur level of a placeholder image. Set 0
to disable blurring.
NOTISE Works only if placeholder was defined as image URL
<Image src="img-800x400.jpg" placeholder="img-20x10.jpg" blur={1} />
ratio
Type: Number, Default: undefined
<Image src="img-800x400.jpg" ratio={2.0} />
<Image src="img-800x400.jpg" ratio={800/400} />
<Image src={this.pops.src} ratio={this.pops.width / this.pops.height} />
debounce
Type: Number, Default: 200
<Image src="img.jpg" debounce={1000} />
animationSpeed
Type: Number, Default: 400
<Image src="img-800x400.jpg" placeholder="img-20x10.jpg" animationSpeed={800} />
fallback
Type: String, Default: undefined
<Image src="img.jpg" fallback="image-not-found.jpg" />
maxWidth
Type: Number/String, Default: undefined
<Image src="img.jpg" maxWidth="200px" />
<Image src="img.jpg" maxWidth={200} />
<Image src="img.jpg" maxWidth="50%" />
inline
Type: Bool, Default: false
<Image src="img.jpg" maxWidth="50%" inline />
id
Type: String, Default: undefined
<Image src="img.jpg" id="image_1" />
className
Type: String, Default: undefined
<Image src="img.jpg" className="post-image" />
alt
Type: String, Default: undefined
Sets the alt attribute of an image and placeholder.
<Image src="img.jpg" alt="Nature" />
crossOrigin
Type: String, Default: undefined
Sets the crossorigin attribute of an image and placeholder.
<Image src="img.jpg" crossorigin="anonymous" />
sizes
Type: String, Default: undefined
Sets the sizes attribute of an image.
<Image src="img-800x400.jpg" srcSet="img-400x200.jpg 400w, img-800x400.jpg 800w" sizes="(max-width: 800px) 100vw, 800px" />
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago