Breaking News: Grepper is joining You.com. Read the official announcement!

fallback image react

Mehedi Islam Ripon answered on February 12, 2023 Popularity 7/10 Helpfulness 8/10

answer fallback image react

fallback image react

Comment

/* If you are developing a web application, then there are a lot of things to 
consider. One important aspect is the images that are used, for aesthetic 
purposes or various other reasons (e.g. icons). Either way, it is important
to have a backup plan in case images don't load for some reason.
To achieve this we can use the onerror event handler on img elements.
This handle will get called if an error occurs while loading or rendering an 
image. */

import React from 'react';

export default function App() {
  const addImageFallback = (event) => {
    event.currentTarget.src = '/images/fallback.png';
  };

  return (
    <img src="/images/broken.png" alt="" onError={addImageFallback} />
  );
}


// TypeScript Example:
import React, { SyntheticEvent } from 'react';

export default function App() {
  const addImageFallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
    event.currentTarget.src = '/images/fallback.png';
  };

  return (
    <img src="/images/broken.png" alt="" onError={addImageFallback} />
  );
}

Popularity 7/10 Helpfulness 8/10 Language javascript

Source: devdojo.com

Tags: fallback image javascript

Link to this answer
Share Copy Link

Contributed on Feb 12 2023

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

fallback image react

Contents

More Related Answers

fallback image react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.