警告用户错误的值

Question

好的，所以我需要知道是否可以提醒用户图像的 url 无效（假设他们输入错误）。

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

图片由网站提供，如图片编码不正确，请用户知悉。

请运行代码段。

要获得合法图片，请在文本框中输入 63700。

现在输入一个随机数字或单词...没有任何显示？需要提醒用户。我希望我说得有道理。

function myFunction() {
  var x = document.getElementById("imagetxt").value;
  var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg"
  document.getElementById("image1").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 1

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

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"); } );

警告用户错误的值

Alerting user for wrong value

html

javascript

alert

image