How to fix broken images in React.

Headshot Mihai Serban

Serban Mihai / 24 October 2018

~1 min read

Missing image example

In one of my recent projects we encountered many images which were missing from our S3 bucket. When I see something like this it just makes me sick 😫.

<img> provides us with two events, onLoad and onError. We can use these two keep track of the status of the image.

onError is called when our image has failed to load, and we can set src to our preferred fallback image.

onLoad is called when our image loaded successfully, nothing for us to do here.

import React from "react";  
import PropTypes from "prop-types";  

class Image extends React.Component {  
  constructor(props) {  
    this.state = { src: props.src };  

  componentWillReceiveProps(nextProps) {  
    if (this.props.src !== nextProps.src) {  
        src: props.src  

  handleImageLoad() {  
    console.log("image loaded", this.state.src);  

  handleImageError() {  
    console.log("image failed loaded", this.state.src);  
    if (this.props.placeholder) {  
      console.log("try load placeholder");  
      this.setState({ src: this.props.placeholder });  

  handleOnContextMenu(e) {  
    if (this.props.disableContextMenu) {  

  render() {  
    const { src, placeholder, disableContextMenu, ...other } = this.props; // es7  

    return (  

Image.defaultProps = {  
  src: "",  
  placeholder: "",  
  disableContextMenu: false  

Image.propTypes = {  
  src: PropTypes.string.isRequired,  
  placeholder: PropTypes.string,  
  disableContextMenu: PropTypes.bool  

export default Image;

Also available as a Gist.

You can find a more complete ES6 cheetsheet on my Github page.

P.S. If you ❤️ this, make sure to follow me on Twitter, and share this with your friends 😀🙏🏻

gatsby  +  contentful  +  netlify  = ❤️[Source code]