React Load IMG
📷 pre-load and provide a fallback for images in react
Why
The internet can be unpredictable and having a broken image in your web application is very uncool. This provides a way to add a pre-loader for a massive image and/or provide a fallback image in case your image fails to load for whatever reason.
Props
string
src src
is a string representing the url of the image you'd like to load (just like an img tag)
function
render render
is a function that receives an object as its only argument
The object contains the following keys:
- src
string
(once loaded) otherwiseundefined
- error
object
(if loading fails) otherwiseundefined
Install
npm install -S react-load-img
Basic Usage
<LoadImage src='https://upload.wikimedia.org/wikipedia/commons/8/86/Redningsb%C3%A5den_k%C3%B8res_gennem_klitterne_%28high_resolution%29.jpg' render= { return src ? <img src=src /> : error ? <div>Failed to load image :</div> : <div>Loading...</div> }} />
License
Copyright © 2017 Ricky Miller (@rickycodes).
Released under the MIT license.