Mission Impossible:
Hiding Image-Not-Found Icons

   React

[Cue dramatic music]

Your mission, should you choose to accept it, is to build a list of contacts that shows a profile picture and a name. For contacts that don’t have a profile picture, you should display their initials instead. There is also one catch: if any of the profile images fail to load, you should show their initials.

For example:

image00
I know what you’re thinking: “<img> tags and onerror handlers.”

No.

I would normally agree but this is Mission Impossible so let’s try something different. Say we have a React component that renders our list like this:

Instead of having an <img> tag in this render method, we can break that out into its own <ObjectImage> component and add some logic to it.

The secret here is in using the <object> tag to load our images instead of an <img> tag. Set the data attribute to the image source ie “./images/myimage.jpg” and then set the type attribute to the appropriate content type.

The contents of the <object> tag will be rendered if the object data cannot be rendered, so, you are free to provide whatever alternate content you need there. In our case, we are extracting the contact’s initials from the name. Then, simply style as needed.

Voila!

View the CodePen here.

[This post will self-destruct in five seconds. Good luck.]


This website uses cookies

These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Please consent to the use of cookies before continuing to browse our site.

Like What You See?

Got any questions?


>