ImageExample.js

import React from "react";

export default class Tooltip extends React.Component {

	state = {
		visible: false,
		imageStatus: null
	}

	handleImageLoaded = () => {
		this.setState({ imageStatus: "loaded" });
	}

	handleImageErrored = () => {
		this.setState({ imageStatus: "failed to load" });
	}

	renderSpinner = () => {
	 	if (this.state.imageStatus === "loaded") {
			return null;
	  	}else if(this.state.imageStatus === "failed to load"){
	  		return (<p>No image found</p>);
	  	}
		return (
			<Spinner/>
	  	);
	}

	componentWillReceiveProps(nextProps) {
		if(nextProps.img !== this.props.img){
			this.setState({imageStatus: null})
		}
	}

	render(){
		const {top, left, visible, img, title, url} = this.props,
			visibleClass =  visible === true ?  "" : "hide";
		
	        var path = parseUri(url).path;
		    path = path.length <= 0 ? url : "..." + path;
    
		return (
			<div class={"node-wrap " + visibleClass} style={{position: "fixed", top: top, left: left}}>
				<div class="node-img">
					{this.renderSpinner()}
					{renderIf(this.state.imageStatus !== "failed to load")(
					<img 
						src={img} 
						onLoad={this.handleImageLoaded}
						onError={this.handleImageErrored}
					/>)}
				</div>
			</div>
		);
	}
}