How to check for broken images in React JS

Question

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!

I wrote something that can address this: github.com/mbrevda/react-img-multi — Mbrevda
– Mbrevda, Commented Apr 4, 2017 at 18:47
Found this video tutorial on this - youtu.be/90P1_xCaim4 which actually helped me building a full fledged image component for my application. I also found this along with which is awesome preloaders for my image component - youtu.be/GBHBjv6xfY4. By combining both you can provide a wonderfull UX for the users. — Prem
– Prem, Commented Jan 13, 2019 at 16:11

isherwood · Accepted Answer · 2022-08-17 16:09:52Z

88

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'
}

edited Aug 17, 2022 at 16:09

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Jul 22, 2016 at 13:35

eltonkamami

5,1881 gold badge24 silver badges30 bronze badges

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

4 Comments

eltonkamami Over a year ago

@nyhunter77 the fired when column can help you out. but you will have to track down your issue. in this case that column says A resource failed to load.

Adrian Pop Over a year ago

onError is marked as deprecated now (and it doesn't seem to work anymore). Do you know what's the best approach for the new versions?

Nuhman Over a year ago

@AdrianPop this is still working. Tested in Chrome 88

Alexander P Over a year ago

If you like me using React look at this answer stackoverflow.com/a/48222599/13162807

Luis Febro · Accepted Answer · 2020-06-30 14:25:00Z

3

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"
/>

answered Jun 30, 2020 at 14:25

Luis Febro

1,8621 gold badge20 silver badges25 bronze badges

Comments

dhellryder · Accepted Answer · 2020-05-07 12:34:05Z

2

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.}

answered May 7, 2020 at 12:34

dhellryder

911 silver badge8 bronze badges

Comments

Petr Bela · Accepted Answer · 2017-03-29 19:43:26Z

1

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

answered Mar 29, 2017 at 19:43

Petr Bela

8,7912 gold badges36 silver badges38 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:25:49Z

0

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

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jul 22, 2016 at 13:38

waqas ali

6236 silver badges13 bronze badges

3 Comments

nyhunter77 Over a year ago

As I understand it, it's bad form to mix Jquery and React JS. So far i haven't needed to but I do feel at times like I have one arm tied behind my back

waqas ali Over a year ago

yes of course. i am just giving you hint how to do this. react also use onError attribute and if you are working on react you know how to call a component method on attribute like onError={somecomponentmethod} in image tag.

nyhunter77 Over a year ago

Yep, thanks, I tried a few methods similar to the "Jquery way" or pure JS way but I wasn't successful

JorUge Ferrari · Accepted Answer · 2021-03-10 13:50:40Z

0

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"; }}
    />

answered Mar 10, 2021 at 13:50

JorUge Ferrari

213 bronze badges

Comments

Seena Mani · Accepted Answer · 2022-03-09 19:44:25Z

0

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>
  );
}

answered Mar 9, 2022 at 19:44

Seena Mani

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

JShoe · Accepted Answer · 2022-10-16 19:15:20Z

0

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}/>

edited Oct 16, 2022 at 19:15

JShoe

3,5029 gold badges42 silver badges67 bronze badges

answered Oct 12, 2022 at 12:13

Pawan Chhangani

12 bronze badges

Collectives™ on Stack Overflow

How to check for broken images in React JS

8 Answers 8

4 Comments

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related