Replace corrupt images with 404 image in react

Question

Hi, on my webpage there are few images which are giving this response when going directly to the image link. I am using react in the frontend. Is it possible to check before loading these type of images that if there is no proper image at the location, load a not found image or 404 image. There are many ways which enable us to show 404 image if there is nothing at the link. But here I am getting something at the link but the webpage is not able to render this because its not in the correct format or whatever is the reason. Is there any way to handle this in react?

Thanks

Maybe this could be helpfull, it has onError event - github.com/gokcan/react-shimmer or look at the source code. I Imagine you would have to something similar as the loadImage method github.com/gokcan/react-shimmer/blob/master/src/web/index.js — Kunukn
– Kunukn, Commented Jul 18, 2018 at 11:25

Pintouch · Accepted Answer · 2018-07-18 11:42:28Z

2

You can use onError event handler on <img> tags like this :

import React from "react";

class ImageComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { imageStatus: "loading", error: false };
  }

  handleImageLoaded() {
    this.setState({ imageStatus: "loaded", error: false });
  }

  handleImageError() {
    this.setState({ imageStatus: "failed to load", error: true });
  }

  render() {
    return (
      <div>
        <img
          src={this.state.error ? 'static/404.png' : this.props.imageUrl}
          onLoad={this.handleImageLoaded.bind(this)}
          onError={this.handleImageError.bind(this)}
        />
        {this.state.imageStatus}
      </div>
    );
  }
}
export default ImageComponent;

answered Jul 18, 2018 at 11:42

Pintouch

2,6191 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Replace corrupt images with 404 image in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related