Skip to content
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
October 30, 2015

Mission Impossible:Hiding Image-Not-Found Icons

Application Development

[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:

image00I 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.]

Posted in Application Development
Share this

Timothy Eagan

Timothy Eagan was a Senior Engineer at Modus Create, and is an accomplished software developer with over 20 years of experience in creating customized business solutions. He can be found in Providence, RI. Tim is also an OIF veteran, former paperboy and part-time comedian.
Follow

Related Posts

  • Protractor Parameters: Adding Flexibility To Automation Tests
    Add Flexibility to Automation Tests with Protractor

    If you’re willing to read the API docs on it and do a little experimenting,…

  • Writing Cucumber Features: Which Approach is Better?
    Writing Cucumber Features:
    Which Approach is Better?

    Cucumber is an awesome tool that can help your team create living documentation for your…

Subscribe to the Modus Newsletter

Receive the latest insights from our team each month.

modus create logo_white
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers

© 2023 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

Scroll To Top