Using JavaScript, how can I replace broken images with any other HTML data

Question

I provide a service, that help users to find location of pictures. My problem is that the pictures are stored on an other internal site, and my users needs to be connected to it to see the pictures (some may not have access, as my service provide other info). The built-in replacement (alt attribute of IMG) doesn't provide enough flexibility to inform the user of the corrective actions

<div id=theDiv>
    <img src='http\internalSite\'+this.name+'.jpg'
    alt='Please connect to internalSite to see the picture '+this.name+'.jpg'>
</div>

I would like to improve the alt text, at least provide a link to 'internalSite' (or even better, load the connection page in an iFrame perhaps...). I found this to be impossible, so I would use onError attribute of IMG to replace what I have on the div

But in fact, the image is placed here by script, so I think this is a bit silly and clearly not optimized how can my script detect that the picture is unavailable before, to decide what I do?

in pseudo code:

if (isURLavailble(path)){
    loadPicture();
} else {
    loadSomethingNiceToSayPicIsntAvailable() ;
}

is it possible to define a working function (and of course cross-browser) that does isURLavailble(path); ?

This is a pretty vague question - not entirely sure what you're trying to achieve with the alt-text. You can do a HTTP request for the picture to detect whether the image is loadable, is that an option and would it help with your issue? — Liam MacDonald, May 02 '17 at 14:51
that is indeed a possibility. I asked because I didn't knew of this before (I'm self taught, I miss a lot of basics), so I'll test it along with the other answers! And about what I'm trying to achieve, I though I was clear, I'm trying to put more content than what it is possible to do with alt='', HTML content instead of text only — Rafiki, May 02 '17 at 15:29
One possible solution is to dynamically generate an image with the help text on the internal site if the user is not logged in. This is what image hosting sites to to tell users not to hotlink their images. This is pretty easy to do with PHP image functions if you have PHP on your internal site. — Cave Johnson, May 02 '17 at 15:47
@SinanÜnür your idea seems to work, but I have issues, I'll rework that a bit later and tell you if it worked — Rafiki, May 02 '17 at 16:01
@KodosJohnson, I already though of it, but the internal site isn't developed anymore (only maintained, no budget), and no solution to replace it so soon — Rafiki, May 02 '17 at 16:02

score 2 · Answer 1 · answered May 02 '17 at 14:53

2

You can check url using JQuery jqXHR calls:

$.get("urlToCheck.com").done(function () {
  loadPicture();
}).fail(function () {
   loadSomethingNiceToSayPicIsntAvailable() ;
});

answered May 02 '17 at 14:53

Sumit Ridhal

1,359
3
14
30

It doesn't work for me: I can't test the picture URL, it fails (XMLHttpRequest cannot load), and the pages of this site are available in any case, connected or not – Rafiki May 02 '17 at 15:45
yes, as I said, 'XMLHttpRequest cannot load' for pictures – Rafiki May 02 '17 at 15:59
Is it Cross-Origin Request : crossdomain ? – Sumit Ridhal May 02 '17 at 16:02
kind of, but yes (people10.company.corp and people12.company.corp, don't ask me why we have this) – Rafiki May 02 '17 at 16:04
In case of Cross-Origin Request JQuery gets :: No ‘Access-Control-Allow-Origin' Error. Check https://www.youtube.com/watch?v=uDy_cvf4nDg – Sumit Ridhal May 02 '17 at 16:48

Sinan Ünür · Accepted Answer · 2017-05-02T15:32:19.480

You could replace all broken images (or a subset of them) with login links:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>

    <body>

        <img src="doesnotexist">

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            // See also https://stackoverflow.com/a/34726863/100754
            $( document ).ready( function () {
                "use strict";
                $('<a href="login">login here</a>').replaceAll($('img').filter( function () {
                    return !(this.complete && this.naturalHeight !== 0);
                }));
            });
        </script>

    </body>
</html>

See also this answer to Check if an image is loaded (no errors) in JavaScript.

Or, you can do something like this if you are setting images after the page has loaded:

var img = new Image();
img.onload = function () {
    $(img).appendTo('.image-container');
};
img.onerror = function () {
   $('<a href="login">login here</a>').appendTo('.image-container');
};
img.src = 'doesnotexist';

Thanks, the second solution was exactly what I needed. The pictures are loaded after the page is loaded, on demand of the user. I had to find a few tricks because it didn't work if the same image is loaded, closed and loaded again, but you really set me on the correct track! — Rafiki, May 04 '17 at 10:26

Using JavaScript, how can I replace broken images with any other HTML data

2 Answers2