如何测试链接在Javascript或JQuery中是否有效？我们正在开发一个Web界面（只供查看），用于我们的一个应用程序，它是基于C++的。web应用程序使用引导。我是JavaScript和JQuery的初学者_Javascript_Jquery

如何测试链接在Javascript或JQuery中是否有效？我们正在开发一个Web界面（只供查看），用于我们的一个应用程序，它是基于C++的。web应用程序使用引导。我是JavaScript和JQuery的初学者

javascript jquery

如何测试链接在Javascript或JQuery中是否有效？我们正在开发一个Web界面（只供查看），用于我们的一个应用程序，它是基于C++的。web应用程序使用引导。我是JavaScript和JQuery的初学者,javascript,jquery,Javascript,Jquery,在网页的顶部，如果有缩略图，我需要显示缩略图，否则将显示默认图片我有指向缩略图的链接，即使它没有指向任何资源（图片可以出于不同的原因被删除，这些原因在这里是不相关的，这不是一个错误）。指向缩略图的链接具有以下格式/resources/id={some_id} 使用jquery，我可以执行以下操作： <html> <body> <img id="thumbnail" /> <script> var jobId =

在网页的顶部，如果有缩略图，我需要显示缩略图，否则将显示默认图片

我有指向缩略图的链接，即使它没有指向任何资源（图片可以出于不同的原因被删除，这些原因在这里是不相关的，这不是一个错误）。指向缩略图的链接具有以下格式/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>


var jobId=getUrlVars（）[“jobId”]；
$.getJSON（“/jobs？jobId=“+jobId，函数（jobDescription））{
设thumbnailSrc=jobscription.thumbnailSrc；
如果（/*thumbnailSrc链接正在工作*/）
$（'缩略图'）.attr（“src”，thumbnailSrc）；
其他的
$（'#缩略图'）.attr（“src”，“/resources/default_picture.png”）；
});

如何在Javascript（或JQuery）中测试链接是否有效？

使用如下回调函数

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


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


函数myFunction（）{
警报（'无法加载图像'）；
}

您可以将an分配给映像，并在映像内部将回退源分配给

src

，例如，在jQuery中，如下所示：

$（函数（）{
$（'#缩略图'）。在（'error'，function（）上{
让我们后退https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
$（this.attr（'src'，fallback\u img\u src）；
});
设错误的(img)src='错误的(img)src.jpg'；
$（'thumbnail'）.attr（'src'，error\u img\u src）；
});
以下内容加载图像，如果为404，则加载默认值：

let src=”https://lh3.googleusercontent.com/PS1VZpazvgLZx9GkeudW7vn4JAMp42SpLcV3ugn45z5HFdnx5iXxENLdjN3ZhaYhAa3aByKe9HJAT_b-0LIJeeJGL2-_vS7RxLKQv6kEAA";
让srcBad=”https://lh3.googleusercontent.com/not_exist";
让src默认值=”https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg";
让elImg=document.createElement（“img”）；
让elImg2=document.createElement（“img”）；
函数loadImage（el、src、src默认值）{
el.addEventListener（“负载”，功能（ev）{
文件.正文.附件（el）；
});
el.addEventListener（“错误”，函数（ev）{
log（“加载错误，使用默认值”）；
el.src=src默认值；
});
el.src=src；
}
loadImage（elImg、src、srcDefault）；
loadImage（elImg2、srcBad、srcbault）
img{
宽度：200px
}
@mplungjan，他要求一个图像。工作正常，我只是用js替换了alert（），添加了默认图像。@R0m1，干得好。将对图像进行两次调用，但您可以对图像url执行一个简单的$。获取
。或者您可以$。获取图像，然后将其转换为数据：
url，并将其用作src。