Could UserIcon "image not found" fallback to abbreviation ?

[raplemie]

Hi,

I started looking at the UserIcon and our UX recommendations are to use a Gravatar image if the user have one available, or the abreviation if none is available.

I looked a bit into doing this, but basically, I dont really have a way to know if the image will be valid or end in a 404 (except maybe doing a fetch first on the URL, which makes the feature a bit complex) ?

I found online an article to style broken images: https://bitsofco.de/styling-broken-images/ While I must admit I havent tried it, it seems that we could leverage that in some way to use the image, and style a broken link with the abreviation.

So instead of providing a JSX.Element, I would provide a url to the image profile, the abreviation and the backgroundColor, and depending of the fetch status of the browser, the image would be displayed, and if not found, the properly styled abreviation.

Not a priority, just wondering if this was already been looked at or some other solutions was better.

Thoughts ?

[mayank99]

I think if we were to handle images, it increases complexity quite a bit because of how much the content can vary. We already saw this somewhat happen in Tile.

JSX.Element is simpler for us, as it leaves everything upto the user (who does not have to think of every use case, like we would need to).

In this case, the user should probably be the one to check if the browser fetch failed (and pass undefined to image if it did).

---

In the future, we might want to add an Image component that handles some common things and can be reused across our main components.

[bentleyvk]

I agree with Mayank that this would increase complexity. @raplemie have you tried onError callback on <img>?

[veekeys]

If this is almost only a css solution, I think we could handle that. And that could be a default behavior, which would be useful for almost all the cases of the user.

[raplemie]

Not sure how that would be complex, at @veekeys suggestion, I made an issue in itwinui-css in which I puts the css itselft that is needed (got that in about one hour, so the final edgecases can probably be ironed out), if anything, the whole component is simpler as there is only the img tag in it, instead of the img OR the abbreviation span that is currently in the react component.