Avatar: Fallback to label or icon variant when image loading fails

[KOliver94]

Describe the feature you would like to see added

It would be great if the Avatar component would have some kind of default fallback functionality. Currently, if I specify the image property it will always be rendered as <img src={props.image} alt={props.imageAlt} onError={props.onImageError}></img> even if the image cannot be loaded. The only option to overcome this issue is to define a function for onError which I can use to change the event.target.src but if I don't have a fallback image and I want to use an icon just like the component would do I need to change then event.target.outerHTML which is complicated and will not follow PrimeReact changes.

Is your feature request related to a problem?

No response

Describe the solution you'd like

MUI uses the following solution to try to load images before render:
https://github.com/mui/material-ui/blob/5eb6caf89e763f346e5c57494d6aa45eff17d3b3/packages/mui-material/src/Avatar/Avatar.js#L92-L129

Based on that they decide what to render:
https://github.com/mui/material-ui/blob/5eb6caf89e763f346e5c57494d6aa45eff17d3b3/packages/mui-material/src/Avatar/Avatar.js#L150-L180

In my opinion this can be an opt-out feature for example defining a new prop defaultFallback with true as default value and change this line:

primereact/components/lib/avatar/Avatar.js

Line 8 in 959f77d

if (props.image) {

to

if (props.image && (!prop.defaultFallback || (prop.defaultFallback && imageLoaded))) {

However, this solution as opt-out can be a breaking change for those who use onError to solve image loading issues.

Describe alternatives you have considered

No response

Additional context

No response

[melloware]

I like this idea. I have also used a couple of other options in the past like this as a fallback URL: https://ui-avatars.com/

[melloware]

Actually I think I want to do this...

<Avatar image={`invalid.jpg`} imageFallback={`https://ui-avatars.com/api/?name=Fall+Back`} />

Give you an imageFallback URL so that would do this..

Thoughts?

This way its NOT a breaking change on users already using onImageError.

[melloware]

Please review my PR.

[melloware]

OK i also allow a default as you stated where it will fallback to label then icon if you want.