javascripthtmltextreplaceonerror

Replace Broken image with text


Is it possible to replace a photo with simple text, in case the link is wrong or the photo is no longer available?

<img id="CurrentPhoto" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1200px-Stack_Overflow_logo.svg.png" onerror="this.src='https://www.stackoverflowbusiness.com/hubfs/logo-so-white.png'" alt="">

With this code it is possible to replace the image in case of broken link. However, I wish I could insert text instead of the second photo. For example, make text "eg Stackoverflow" appear if the first photo is not available.

It's possible? Would any good little angel know how to help me?


Solution

  • Using the alt attribute is a good solution for this, because it is made to be there for displaying when the image is not loaded.

    There is already a similar question here on Stackoverflow: How to hide image broken Icon using only CSS/HTML?

    The answer is not the accepted answer, but I think it is a very nice way to do this with pure css.

    The code is fine and there is also a link if you like to check the source: https://bitsofco.de/styling-broken-images/