Fallback image

[mxstbr]

It'd be great if one could pass a fallback image to be used if loading the actual image fails. (this is useful for sites with user-uploaded photos that might not always be available) It could look something like:

<IdealImage
  src={user.profilePhoto}
  fallback="site.com/img/default-user-profile-photo.jpg"
/>

[stereobooster]

if loading the actual image fails

it will look like this

I'm trying to understand your use case. Let's assume there is fallback image, do you expect error icon over it and ability to retry on click?

[mxstbr]

No, I wouldn't want the ability to retry—I would want to just show the default avatar.

[stereobooster]

I would say this is a bit different component. It is possible to add this logic to the existing component, but it is already pretty big.

Initially I planed to implement small components, like lazy-load or adaptive-load and combine later in IdealImage, I didn't find a good way to compose them and gave up the idea. If such primitives would exist in this project it would be possible to construct what you want, but I do not want to overcomplicate existing component.

Other UX questions/ideas:

• do you want to show LQIP-placeholder while image loads and later switch to default if it fails? It seems to be strange
• in case of avatar, it is possible to generate colour based on user's name and use it as placeholder, plus use initial letters instead of icon - and do not use default image at all (just an idea)