How can I test if a link is valid in Javascript or JQuery?

Question

We are currently developing a web interface (only for viewing) for one of our applications, which is C++ based. The web application uses Bootstrap. I am a JavaScript and JQuery beginner.

At the top of the web page I need to display a thumbnail if it's available, otherwise a default picture.

I have the link to the thumbnail, even if it's not pointing at any resources (the picture can be deleted for different reasons that are irrelevant here, and this is not an error). The link to the thumbnail has the following format /resources/id={some_id}

Using jquery, I do the following :

<html>
  <body>
    <img id="thumbnail" />

    <script>
      var jobId = getUrlVars()["jobId"];
      $.getJSON("/jobs?jobId=" + jobId, function(jobDescription) {
         /* thumbnailSrc will always contain something valid,
but that can point to some not existing picture */
         let thumbnailSrc = jobDescription.thumbnailSrc;
         $('#thumbnail').attr("src", thumbnailSrc);
      });
    </script>
  </body>
</html>

If the link is valid, everything is fine; otherwise, it displays a broken picture. I would like to test if thumbnailSrc is a valid link (not returning a 404 error) to be able to do something like:

  <script>
    var jobId = getUrlVars()["jobId"];
    $.getJSON("/jobs?jobId=" + jobId, function(jobDescription) {
       let thumbnailSrc = jobDescription.thumbnailSrc;

       if (/* thumbnailSrc link is working */)
           $('#thumbnail').attr("src", thumbnailSrc);
       else
           $('#thumbnail').attr("src", "/resources/default_picture.png");
    });
  </script>

How can I test in Javascript (or JQuery) if a link is valid?

Would make two calls to the image, but you could do a simple `$.get` on the image url. Or you could `$.get` the image then convert it to a `data:` url and use that as the src. — freedomn-m, Jan 27 '20 at 14:44

score 4 · Accepted Answer · answered Jan 27 '20 at 14:35

4

Use a callback function like below

<img src="image.gif" onerror="myFunction()">


<script>
  function myFunction() {
   alert('The image could not be loaded.');
  }
</script>

answered Jan 27 '20 at 14:35

Alok Mali

2,821
2
16
32

1

@mplungjan, He is asking for an image. – Alok Mali Jan 27 '20 at 14:37
Working fine I just replaced the alert() with the js to add the default image. – R0m1 Jan 27 '20 at 15:03
1

@R0m1, well-done brother. – Alok Mali Jan 28 '20 at 05:28

score 2 · Answer 2 · answered Jan 27 '20 at 14:43

You can assign to your image an onerror event, and inside it you can assign to src the fallback source, e.g. in jQuery it would be like this:

$(function() {
  $('#thumbnail').on('error', function() {
    let fallback_img_src = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
    $(this).attr('src', fallback_img_src);
  });
  
  let wrong_img_src = 'wrong_img_src.jpg';
  $('#thumbnail').attr('src', wrong_img_src);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="thumbnail" />

nonopolarity · Answer 3 · 2020-01-27T15:10:48.990

The following loads the image and if 404, loads the default:

let src = "https://lh3.googleusercontent.com/PS1VZpazvgLZx9GkeudW7vn4JAMp42SpLcV3ugn45z5HFdnx5iXxENLdjN3ZhaYhAa3aByKe9HJAT_b-0LIJeeJGL2-_vS7RxLKQv6kEAA";

let srcBad = "https://lh3.googleusercontent.com/not_exist";

let srcDefault = "https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg";

let elImg = document.createElement("img");
let elImg2 = document.createElement("img");

function loadImage(el, src, srcDefault) {
  el.addEventListener("load", function(ev) {
    document.body.appendChild(el);
  });

  el.addEventListener("error", function(ev) {
    console.log("load error, using default");
    el.src = srcDefault;
  });

  el.src = src;
}

loadImage(elImg, src, srcDefault);
loadImage(elImg2, srcBad, srcDefault);

img {
  width: 200px
}

In jQuery:

let src = "https://lh3.googleusercontent.com/PS1VZpazvgLZx9GkeudW7vn4JAMp42SpLcV3ugn45z5HFdnx5iXxENLdjN3ZhaYhAa3aByKe9HJAT_b-0LIJeeJGL2-_vS7RxLKQv6kEAA";

let srcBad = "https://lh3.googleusercontent.com/not_exist";

let srcDefault = "https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg";

let elImg = document.createElement("img");
let elImg2 = document.createElement("img");

function loadImage(el, src, srcDefault) {
  $(el).on("load", function(ev) {
    document.body.appendChild(el);
  });

  $(el).on("error", function(ev) {
    console.log("load error, using default");
    el.src = srcDefault;
  });

  el.src = src;
}

loadImage(elImg, src, srcDefault);
loadImage(elImg2, srcBad, srcDefault);

img {
  width: 200px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How can I test if a link is valid in Javascript or JQuery?

3 Answers3

Linked