除非URL是有效图像，否则显示默认图像
除非URL是有效图像，否则显示默认图像
提问于 2010-12-21 17:09:17
我需要允许web用户为图像输入一个URL，并且我希望用户能够直观地确认该URL是否有效(或无效)。
我希望这样，如果用户输入：
它将显示默认(未找到) image.
http://example.com/ValidImageUrl.any_or_no_extension，--它将接受它，并显示image.
hxxp://example.com/ValidImageUrl.any_or_no_extension，--它将显示默认(未找到) image
http://example.com/INVALID_imageurl.any_or_no_extension，，它将显示默认(未找到)图像。本质上，如果链接不是200，它应该显示default
http://example.com/asdf?qwerty&t=10982741238947，(假设它是有效的)--它将自动确定它是否有效，如果有效，则显示它，否则将显示默认(未找到)图像。这是最难捕捉的案例，但在当今的flickr & picassa嵌入式世界中，它正变得越来越重要。但是，如果浏览器能够将其检测为图像并显示出来，那么javascript就应该能够检测到它，并识别它的particulars.
。
以下是一个非常简化的示例：
<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服务器端处理，这是可能的，但肯定不是最优的.
有什么想法吗？
请忽略上述任何良性编码错误，因为我目前不在一台可以测试我自己代码的机器上.
Stack Overflow用户
回答已采纳
发布于 2010-12-21 17:13:39
你很幸运:)
图像有一个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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4501927
复制相关文章
相似问题
腾讯云开发者
