如何测试链接在 Javascript 或 JQuery 中是否有效？ [复制]答案

【问题标题】：How can I test if a link is valid in Javascript or JQuery? [duplicate]如何测试链接在 Javascript 或 JQuery 中是否有效？ [复制]
【发布时间】：2020-01-27 14:31:28
【问题描述】：

我们目前正在为我们的一个基于 C++ 的应用程序开发 Web 界面（仅供查看）。 Web 应用程序使用 Bootstrap。我是 JavaScript 和 JQuery 初学者。

如果可用，我需要在网页顶部显示缩略图，否则显示默认图片。

我有缩略图的链接，即使它没有指向任何资源（图片可以由于不同的原因而被删除，与此处无关，这不是错误）。缩略图的链接格式如下 /resources/id={some_id}

使用 jquery，我执行以下操作：

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

如果链接有效，则一切正常；否则，它会显示一张破损的图片。我想测试 thumbnailSrc 是否是一个有效链接（不返回 404 错误），以便能够执行以下操作：

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

如果链接有效，我如何在 Javascript（或 JQuery）中进行测试？

【问题讨论】：

将对图像进行两次调用，但您可以在图像 url 上执行简单的$.get。或者您可以$.get 图像然后将其转换为data: url 并将其用作src。

标签： javascript jquery

【解决方案1】：

使用如下回调函数

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


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

【讨论】：

@mplungjan，他要一张图片。
工作正常我只是用js替换了alert（）来添加默认图像。
@R0m1，干得好兄弟。

【解决方案2】：

你可以给你的图片分配一个onerror event，在里面你可以给src分配一个备用源，例如在jQuery中它会是这样的：

$(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" />

【讨论】：

【解决方案3】：

下面加载图片，如果是404，加载默认：

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
}

在 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
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：