CODEWITHSUNDEEP
javascriptreactjserror-handlingstate
nyhunter77
nyhunter77

Reputation: 674

How to check for broken images in React JS

I'm writing a module that takes article data from json and shows a large image over the article text, a hero module as they say.

I've got the data and have set it up so if there is an image, it will show that image and if there is no image in the data, it will show a default image. Problem is that this method doesn't replace broken links to show the default image.

I'm still new to react and using state ... question is, should I be using state to check for the broken link and how do I do it?

This is how I get the data in as props in the module:

const { newsItemData: {
          headline = '',
          bylines = [],
          publishedDate: publishDate = '',
          updatedDate: updatedDate = '',
          link: newsLink = '',
          contentClassification: category = '',
          abstract: previewText = '',
          abstractimage: { filename: newsImage = '' } = {},
          surfaceable: { feature: { type: featureType = '' } = {} } = {},
        } = {},
        wideView,
        showPill,
        defaultImage } = this.props;

I display the info in this way:

<div className={imageContainerClassName} style={customBackgroundStyles}>
      {newsImage ? <img className="img-responsive" src={newsImage} alt={headline}/> : <img className="img-responsive" src={defaultImage} alt={headline}/>}
</div>

What should I do in order to also check for broken images? I think this is all the pertinent data needed, let me know if I should show anything else. Thanks!

Upvotes: 26

Views: 46734

Answers (8)

Pawan Chhangani
Pawan Chhangani

Reputation: 1

You don't have to rewrite the entire img element. Instead, you can write it like this:

  <img className="img-responsive" src={newsImage ? newsImage : defaultImage} alt={headline}/>

Upvotes: 0

eltonkamami
eltonkamami

Reputation: 5190

There is a native event for images called onerror that lets perform an action if the image cannot be loaded.

<img onError={this.addDefaultSrc} className="img-responsive" src={newsImage} alt={headline}/>

//in your component
addDefaultSrc(ev){
  ev.target.src = 'some default image url'
}

Upvotes: 88

Seena Mani
Seena Mani

Reputation: 1

import { useState } from "react";
import "./styles.css";
export default function App() {
  const url = "https://secure.gravatar.com/avatar?d=wavatar";
  const [showImage, setShowImage] = useState(true);
  const hideImg = (event) => {
    // this.setState({ showImg: false });
    setShowImage(false);
  };
  return (
    <div>
      {showImage ? (
        <img src={url} alt="perkimage" onError={hideImg} />
      ) : (
        "Default text or image"
      )}
    </div>
  );
}

Upvotes: 0

JorUge Ferrari
JorUge Ferrari

Reputation: 21

In my case was intend to use in a component using map() function, in that scenario was need to change e.target.src to e.currentTarget.src, like code bellow:

    <img src={original.image} 
         alt=""
         onError={e => { e.currentTarget.src = "your_image_not_found_defalt_picture_here"; }}
    />

Upvotes: 0

Luis Febro
Luis Febro

Reputation: 1860

In case that you know the image's error will be the absence of it like you are looping a gallery of profiles and some of them do not have pictures available, then you can simply insert the image's path as a callback like this:

<img
   height="auto"
   width={140}
   src={bizLogo || "/img/error.png"}
   alt="test"
/>

Upvotes: 3

dhellryder
dhellryder

Reputation: 91

Here is what I did to check if the image is broken. There is an attribute called onError which is called when the image is broken or cannot be loaded. For example, here is the img tag:

<img id={logo.id} src={logo.url} alt ={logo.name} onError={this.handleImageError} />

How I handled the error:

handleImageError = e => { //write your logic here.}

Upvotes: 2

Petr Bela
Petr Bela

Reputation: 8741

As mentioned, onError is the way to go.

If you're looking for a component that handles this for you, try https://github.com/socialtables/react-image-fallback

Upvotes: 1

waqas ali
waqas ali

Reputation: 603

According to my understanding you want to see broken images. you should call a method in onError attribute. Check this jQuery/JavaScript to replace broken images

Upvotes: 0

Related Questions