In React, how can I replace a broken image with a default image?

Question

For example, I have:

<img className="article_link_image" src={article.image}></img>

I also have some JavaScript as follows in a separate file, which detects an image fail and returns either the passing src or a default src.

const image = new Image();

function testImage(url, className) {
  image.onload = imageFound;
  image.onerror = imageNotFound;
  image.class = className;
  image.src = url;
}

function imageFound() {
  return image.src;
}

function imageNotFound() {
  return '/generic.png'
}

testImage('http://example.com/image.png');

module.exports = testImage;

However testImage is asynchronous, and I don't know if is is possible to 'wire' it in to React

I would assume you have to set the `image.src` on error (inside your imageNotFound function), not return the value you want to have as the fallback image. — Matthias Thalmann, Jun 12 '22 at 16:29
fyi, the `img` tag is a self-closing tag. That means, the correct way to use it is: `` and not `` — Cornel Raiu, Jun 12 '22 at 16:31
@DamianBusz actually: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#technical_summary `Tag omission: Must have a start tag and must not have an end tag.`. If it displays the image it doesn't mean it's valid HTML — Cornel Raiu, Jun 12 '22 at 16:50
`` `` The following are valid XHTML tags. They have to be closed, as you can see they both are. — Damian Busz, Jun 12 '22 at 16:56
@CornelRaiu here you can actually see a very nice answer on the topic https://stackoverflow.com/a/14860596/7384132 — Damian Busz, Jun 12 '22 at 16:57
@DamianBusz since we don't know if the OP cares about XHTML vs HTML5, I won't argue that. But the `must not have an end tag` in the link above is enough for me to always write: `` or `` :) — Cornel Raiu, Jun 12 '22 at 17:16
@CornelRaiu This is also related to react handling, mainly this https://react-cn.github.io/react/tips/self-closing-tag.html — Damian Busz, Jun 12 '22 at 17:25

Krystian Sztadhaus · Answer 1 · 2022-06-12T16:52:16.443

Try something like this

export default function App() {
  const imgToRender = 'https://wrong.com'
  const imgNotFound = 'https://placekitten.com/g/200/300'

  return (
    <div>
      <img
        src={imgToRender}
        alt=""
        onError={e => {
          e.currentTarget.src = imgNotFound
        }}
      />
    </div>
  )
}

or to try something more advance

import { ImgHTMLAttributes } from 'react'

export default function App() {
  return (
    <div>
      <Img
        src="https://wrong.com"
        notFoundSrc="https://placekitten.com/g/200/300"
      />
    </div>
  )
}

interface ImgProps extends ImgHTMLAttributes<HTMLImageElement> {
  notFoundSrc?: string
}

function Img(props: ImgProps) {
  return (
    <img
      {...props}
      onError={e => {
        props?.onError?.(e)

        if (!props.notFoundSrc) return
        e.currentTarget.src = props.notFoundSrc
      }}
    />
  )
}

In React, how can I replace a broken image with a default image?

1 Answers1