Question

好吧所以我需要知道是否有可能提醒用户图像的网址无效（假设他们输入的内容不正确）。

代码的作用是用户输入图像编号。按下显示屏，图像将显示在下方，以便下载。

图片由网站提供，这就是为什么如果图片代码不正确，必须提醒用户。

请运行代码段。

对于合法图像，请在文本框中输入63700.

现在输入一个随机数字或单词......什么都没有出现？用户需要收到警报。我希望我有道理。

＆＃13;

function myFunction() {
  var x = document.getElementById("imagetxt").value;
  var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg"
  document.getElementById("image1").src = y;
}

＆＃13;

<!DOCTYPE html>

<html>

<head>
</head>

<body align="center">
  <form>
    <input id="imagetxt" size="6" type="text" value="">
    <input type="button" value="Display" onclick="myFunction()">
  </form>
  <img id="image1" src="" width="50%" height="50%">
</body>

</html>

＆＃13;

Answer 1

您应该在.onerror上使用.onload和img个事件。

function myFunction() {
  var x = document.getElementById("imagetxt").value;
  var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";

  // Creating an image
  var img=new Image();

  // Defining the function if image loads successfully.
  img.onload=function(){
     document.getElementById("image1").src = y;
  };

  //Defining the function if image fails to load.
  img.onerror=function(){
     alert("Image not found");
  };
  img.src=y;
  
}

<!DOCTYPE html>

<html>

<head>
</head>

<body align="center">
  <form>
    <input id="imagetxt" size="6" type="text" value="">
    <input type="button" value="Display" onclick="myFunction()">
  </form>
  <img id="image1" src="" width="50%" height="50%">
</body>

</html>

Answer 2

这是一个检查图像或错误的简单函数

function checkImage (src, good, bad) {
    var img = new Image();
    img.onload = good; 
    img.onerror = bad;
    img. src = src;
}

checkImage( "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-303579.jpg", function(){ alert(this.src + " " + "good"); }, function(){ alert("bad"); } );

checkImage( "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-dsdsds.jpg", function(){ alert("good"); }, function(){ alert(this.src + " " + "bad"); } );

警告用户错误的值

2 个答案: