How can I detect a broken link when setting a background image on a div component in React?

Question

<div className="image" style={{ backgroundImage: `url(${entity.image_url})`}} />}

I am setting a background-image by passing the url as an inline style attribute. However, there will be times when the image link is broken. I am familiar with the onerror event of the tag. However I am not familiar with how I can detect a broken link when setting a background image. I was thinking of attempting to load the image in a hidden and use the onerror attribute, but this requires me to load the image twice, which is wasteful. What is a better way to do this?

i have to ask the obvious question. why not just use local images? — sao, Sep 21 '19 at 00:28
Good question, I cannot because I am consuming paginated data from an API — Anthony O, Sep 21 '19 at 02:58

score 1 · Answer 1 · answered Sep 20 '19 at 20:44

1

The old school style is to pre load all images. Preload Images

Now you has the Image in a js object and does not to load the image again or twice. By this you can also check if its broken Detect broken images. And for sure if you use the clever AJAX way of life you can also detect and replace broken images.

answered Sep 20 '19 at 20:44

Thomas Ludewig

696
9
17

1

Just a tip. if you store the images in in a fake frameset (just one frame) they will remain even your page content changes. Some thought also by https://www.photo-mark.com/notes/image-preloading/. BTTW: are you sure that your browser doesnt cache them ? – Thomas Ludewig Sep 20 '19 at 20:50

score 1 · Answer 2 · answered Sep 21 '19 at 10:13

1

why not write some JS and test the entity.image_url. if you don't get an object back it will come up as undefined or null. wrtie an if statement for both to cover the possibilities.

if (entity === undefined || entity === null) {
  //write an error message
} else {
  //drop a dynamic template literal into your html
  //you can either appendChild() or build a string and user innerHTML
}

answered Sep 21 '19 at 10:13

sao

1,835
6
21
40

2

That seems to be the easiest route to go. What I am trying to do is add a fallback image like so:
} – Anthony O Sep 21 '19 at 19:12

score 1 · Answer 3 · answered Sep 23 '19 at 15:42

This is how I was able to do it in React:

 import noImage from <local_image_path>;

 {(entity && entity.image) ?
    <div style={{backgroundImage: `url(${entity.image}), url(${noImage})`}}/> :
    <div style={{backgroundImage: `url(${noImage})`}}/>
  }

This takes care of two cases. Case 1: broken image link. If there is a 404 on the entity.image url, noImage is loaded. Case 2: entity.image is undefined, noImage is loaded.

How can I detect a broken link when setting a background image on a div component in React?

3 Answers3