显示默认图像，除非 URL 是有效图像答案

【问题标题】：Display Default Image Unless URL Is A Valid Image显示默认图像，除非 URL 是有效图像
【发布时间】：2011-05-28 23:10:36
【问题描述】：

我需要允许网络用户输入图像的 URL，并且我希望用户能够直观地确认该 URL 是否有效。

我希望这样如果用户输入：

什么都没有，它将显示默认（未找到）图像。
http://example.com/ValidImageUrl.any_or_no_extension，它会接受它并显示图像。
hxxp://example.com/ValidImageUrl.any_or_no_extension，它将显示默认（未找到）图像
http://example.com/INVALID_imageurl.any_or_no_extension，它将显示默认（未找到）图像。本质上，如果链接不是 200，它应该显示默认值
http://example.com/asdf?qwerty&t=10982741238947，（假设有效）会自动判断是否为有效图片，如果有效则显示，否则显示默认（未找到）图片。这是最难捕捉的情况，但在当今的 flickr 和 picassa 嵌入式世界中变得越来越重要......但是如果浏览器可以将其检测为图像并显示它，那么 javascript 应该能够检测到它并识别其细节.

以下是一个极其简化的例子：

<input id="GivenUrl" onblur="UpdateImage()"/>
<img id="UserImage"/>

<script type="text/javascript">
  var TextBox =  document.getElementById("GivenUrl");
  var Image = document.getElementById("UserImage");
  if (Image.value == "")
  {
    UserImage.setAttribute("src", "MyDefaultImage.jpg");
  }else{
    UserImage.setAttribute("src", encodeURI(TextBox.value));
  }
</script>

最后是我的限制：我最希望解决方案是纯 HTML / javascript，全部在客户端（用户）端处理。稍微不太受欢迎的解决方案将涉及 .Net 服务器端处理，这是可能的，但绝对不是最佳的......

有什么想法吗？

请忽略上面的任何良性编码错误，因为我目前不在可以测试自己代码的机器上......

【问题讨论】：

标签： c# javascript image url

【解决方案1】：

你很幸运:)

图像有一个 onerror 处理程序，因此您不必检查图像的有效性（即，url 可能会尝试返回 HTML 而不是图像），您仍然可以掩饰自己。虽然我很确定该处理程序可能未获得 W3C 批准。

<input id="GivenUrl" onblur="UpdateImage()"/>
<img id="UserImage" onerror="RollbackImage()"/>

<script type="text/javascript">
  var TextBox =  document.getElementById("GivenUrl");
  var Image = document.getElementById("UserImage");
  var OldUrl = Image.src;
  function UpdateImage(){
    OldUrl = Image.src;
    Image.src=TextBox.value;
  }
  function RollbackImage(){
    Image.src=OldUrl;
  }
</script>

【讨论】：

完美！那成功了！作为附录，它是完全合法的 HTML5（参见：w3.org/TR/html5/…）

【解决方案2】：

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Image URL Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#imageurl").blur(function() {
                if (($(this).val()).length > 0) {
                    var testimage = new Image();
                    testimage.onerror = function() {
                        $("#feedbackimage").attr("src", "http://www.professorperformance.com/public/images/university/no_image.gif");
                        $("#feedbackimage").show();
                    }
                    testimage.onload = function() {
                        $("#feedbackimage").attr("src", testimage.src);
                        $("#feedbackimage").show();
                    }
                    testimage.src = $(this).val();
                }
            });
        });
    </script>
</head>
<body>
    <form action="#">
        Image URL: <input type="text" name="imageurl" id="imageurl" value="" />
    </form>
    <img src="#" id="feedbackimage" style="display: none;" />
</body>
</html>

【讨论】：