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
– Liam MacDonald, Commented May 2, 2017 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
– Rafiki, Commented May 2, 2017 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
– Cave Johnson, Commented May 2, 2017 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
– Rafiki, Commented May 2, 2017 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
– Rafiki, Commented May 2, 2017 at 16:02

Sinan Ünür · Accepted Answer · 2017-05-02 15:32:19Z

2

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';

edited May 2, 2017 at 15:32

answered May 2, 2017 at 15:14

Sinan Ünür

118k15 gold badges201 silver badges347 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rafiki Over a year ago

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!

Sumit Ridhal · Accepted Answer · 2017-05-02 14:53:50Z

2

You can check url using JQuery jqXHR calls:

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

answered May 2, 2017 at 14:53

Sumit Ridhal

1,4093 gold badges15 silver badges30 bronze badges

5 Comments

Rafiki Over a year ago

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 Over a year ago

yes, as I said, 'XMLHttpRequest cannot load' for pictures

Sumit Ridhal Over a year ago

Is it Cross-Origin Request : crossdomain ?

Rafiki Over a year ago

kind of, but yes (people10.company.corp and people12.company.corp, don't ask me why we have this)

Sumit Ridhal Over a year ago

In case of Cross-Origin Request JQuery gets :: No ‘Access-Control-Allow-Origin' Error. Check youtube.com/watch?v=uDy_cvf4nDg

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related