image tag - how to put on an ICON (not string - NOT URL) in case of url failure?-CodePudding

I am using React.js as Frontend framework,

I have an icon from antd, and I want to put it in the 'alt' prop of an image tag, so in case that the url I pass there will be null - it will go to put the icon there.

I tried using 'alt' but it only accepts string. is it possible to put there an icon? (like one from antd?)

to emphasize - I want to add it as - <Image alt={<StepBackwardOutlined />}

as in in an actual icon and NOT AS A URL.

CodePudding user response：

Use the onerror attribute.

From the docs:

<img src="imagefound.gif" one rror="this.onerror=null;this.src='logoIcon.jpg';" />

Here logoIcon.jpg is the icon path.

CodePudding user response：

You can use on one rror. Inside one rror you can create a function outside the main return for ex:-

const one rrorImage = ((e) => {
  e.target.src = <StepBackwardOutlined />
})

<img one rror={onErrorImage} />

I never tried it with a component....and i never saw someone using it....so i am not sure that it will work or not.