reactjs image fallback

In React.js, you can use the onError event handler attribute to handle image loading errors and provide a fallback image. Here's an example of how you can achieve this:

import React from 'react';

const ImageComponent = () => {
  const handleImageError = (event) => {
    event.target.src = 'fallback-image.jpg';
  };

  return (
    <img
      src="image.jpg"
      onError={handleImageError}
      alt="Image"
    />
  );
};

export default ImageComponent;

In the above example, the handleImageError function is called when the image fails to load. It sets the src attribute of the <img> tag to the URL of a fallback image, fallback-image.jpg.

Make sure to replace 'image.jpg' and 'fallback-image.jpg' with the actual URLs or paths of your images.