C# 除非URL是有效图像，否则显示默认图像_C#_Javascript_Image_Url

C# 除非URL是有效图像，否则显示默认图像

c# javascript image url

C# 除非URL是有效图像，否则显示默认图像,c#,javascript,image,url,C#,Javascript,Image,Url,我需要允许web用户输入图像的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_ex

我需要允许web用户输入图像的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服务器端处理，这是可能的，但肯定不是最佳的

有什么想法吗

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

你很幸运：）

图像有一个OneError处理程序，因此您不必检查图像的有效性（即，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>

试试这个：

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


图像URL测试
$（文档）.ready（函数（）{
$（“#imageurl”）.blur（函数（）{
如果（$（this.val（））.length>0）{
var testimage=新图像（）；
testimage.onerror=函数（）{
$（“#反馈图像”）.attr（“src”，”http://www.professorperformance.com/public/images/university/no_image.gif");
$（“#反馈图像”）.show（）；
}
testimage.onload=函数（）{
$（“#feedbackimage”）.attr（“src”，testimage.src）；
$（“#反馈图像”）.show（）；
}
testimage.src=$（this.val（）；
}
});
});
图像URL:

完美！成功了！作为附录，它是完全合法的HTML5（参见：）