Bootstrap - fallback when there an image load error

Question

I want to show a no image-placeholder when the original image can't be loaded.
I have seen the usage of JavaScript's this.error to set an alternate image if the original image can't be loaded.

Is there any alternate clean options, may be in Bootstrap or using CSS3?

UPDATE: this is not for a page with a single image. There will be multiple images with different sizes. Something like a social media website. so the performance of the fix is also important. Also the images are uploaded by different user and stored in Amazon S3 bucket.

possible duplicate of [how to show alternate image if source image is not found? (onerror working in IE but not in mozilla)](http://stackoverflow.com/questions/3984287/how-to-show-alternate-image-if-source-image-is-not-found-onerror-working-in-ie) — Ted Nyberg, Jul 16 '15 at 07:56
If JavaScript is a no-go, you could use a server handler which serves a default image if the requested image isn't found. Like /images/myhandler/original/path/to/image — Ted Nyberg, Jul 16 '15 at 07:59
@Praveen See comment, a server handler is a valid approach to avoid JavaScript. — Ted Nyberg, Jul 16 '15 at 08:00
@TedNyberg Server doesn't matter here. Yeah, that's a good idea too, but the question is using **Pure CSS** please. — Praveen Kumar Purushothaman, Jul 16 '15 at 08:01
Not sure OP is requesting that it _must_ be pure CSS. Server handler will be more performant than your suggestion since it is fully cacheable. — Ted Nyberg, Jul 16 '15 at 08:03
@TedNyberg Yes it does. Okay. Let's say this way. What if the server is not capable of handling that or the OP doesn't use a server at all? — Praveen Kumar Purushothaman, Jul 16 '15 at 08:04
if server handler can do it , it will be better , I am using Amazon S3 bucket for storing image. — Sreejith Sasidharan, Jul 16 '15 at 08:04
@SreejithSasidharan There's Amazon API that could actually do it. Lemme get back on this. — Praveen Kumar Purushothaman, Jul 16 '15 at 08:06
@SreejithSasidharan I've used server handlers for similar scenarios - if the image indeed exists in Amazon it will simply "stream" it directly to the client (possibly with additional headers added). This also hides the S3 URL from the client, which is sometimes a good thing. — Ted Nyberg, Jul 16 '15 at 08:07
@Ted Nyberg Is it some kind of image proxy ?Any reference links to configure this option. — Sreejith Sasidharan, Jul 16 '15 at 08:10
@TedNyberg Comments are not answers, a comment isn't a good reason for a duplicate question. — Spencer Wieczorek, Jul 16 '15 at 08:10
@SreejithSasidharan If you can use PHP, we can make a small router to route this stuff. Using `file_exists()` we can send the stream of file, by modifying `.htaccess` to route to the proxy image PHP file and get the right image, when it is found and serve the placeholder image, when not! What say? Are you using PHP? — Praveen Kumar Purushothaman, Jul 16 '15 at 08:13

score 1 · Answer 1 · answered Jul 16 '15 at 07:56

1

There is a solution without JavaScript:

<object data="path/to/your/placeholder.jpg" type="image/jpg">
    <img src="path/to/your/image.jpg">
</object>

But this is a real ugly one. So I'd choose JavaScript over this.

answered Jul 16 '15 at 07:56

Stephan Weinhold

1,623
1
28
37

1

Yeah, that's what the OP wanna use. Using JS is clean, but what about browsers that support only HTML and CSS. – Praveen Kumar Purushothaman Jul 16 '15 at 08:06
3

@PraveenKumar Wait, there are browsers out there being used that don't support JavaScript? I think fallback images would be the last of there worries. – Spencer Wieczorek Jul 16 '15 at 08:15

Praveen Kumar Purushothaman · Answer 2 · 2015-07-16T08:18:00.843

This is a solution with Pure CSS.

As far as I can say, my best bet would be, well, replacing it with an empty image placeholder with a background image inline style, that is an SVG, centred in height and width, and specified as a Data URI, as that never fails.

<img src="image-to-be-loaded.png" />

Having said that multiple images, use the following CSS:

img {
   background: url('data:') center center no-repeat transparent;
   background-size: cover; /* for new browsers */
}

Using the Server to handle the request.

This is like transferring the pain to the server, irrespective of the browser that is requesting the resource. You can do this in these steps:

Redirect all the static resource requests to a router script.
Check if the request gives a 404 error or non-image file from the script.
1. If the file exists, serve the file.
2. If not, grab the placeholder image and server it.

This can be easily done using PHP with the following functions:

file_exists(): Check if the file is existing in the server or not.
file_get_contents(): Read the file and store or spit on the browser.

I am definitely sure that this solution works in server side handling, and if you have a server side script in place, you can make use of these steps to achieve without using JavaScript.

Hope this helps.

Wouldn't some (older) browsers still display the broken image graphic? — Ted Nyberg, Jul 16 '15 at 08:03
@TedNyberg Please murder IE 7 and below. I will give you whatever you want. My solution works best from IE 8. Yes! — Praveen Kumar Purushothaman, Jul 16 '15 at 08:04
Haha, I'll let you know if I find a way of getting rid of it for good! :) — Ted Nyberg, Jul 16 '15 at 08:09
Almost all the companies now-a-days are killing support for IE 7 and 8. Thankfully. Let's see... Even Microsoft is making a [Suicide Plan](https://www.modern.ie/en-us/ie6countdown) for IE 6, 7, 8, for the mistake it did. `:D` — Praveen Kumar Purushothaman, Jul 16 '15 at 08:11

Bootstrap - fallback when there an image load error

2 Answers2