A simple and lightweight replacement for the tag with multiple image fallback support.

With React external image, you can provide multiple images which act as a fallback in case the previous image failed to load.

$ npm install react-external-image --save 

Import react-external-image in your component:

import ExternalImage from 'react-external-image' 

Create a component as follows:

const eImg = () => <ExternalImage src="www.example.com/ex.jpg"/> 

which translates to:

<img src="www.example.com/ex.jpg"> 

You can also add fallback images, in case the image could not be loaded preventing broken <img/>s:

const eImg = () => <ExternalImage src="www.example.com/brokenimage.jpg" fallbackImages={[	'www.example.com/fallback1.jpg',	'www.example.com/fallback2.jpg' ]} /> 

The fallbackImages prop takes an array input and will try to load all the images in the array, starting from the first until an image has been successfully loaded.

You can also show a spinner/loader till the images are being loaded.

const eImg = () => <ExternalImage src="www.example.com/brokenimage.jpg" fallbackImages={[	'www.example.com/fallback1.jpg',	'www.example.com/fallback2.jpg' ]} loader={/* any valid react component */} /> 

react-external-image is available under the MIT License.