显示一张图片，通过访问图片的地址，如果地址正确就显示地址正确的图片，如果不正确就显示默认的地址，说是通过JavaScript判断，实际只需要一个img标签就可以了
这里需要了解一下img标签中的onError ，onAbort，onALoad事件
onError：当图片加载出现错误，会触发 经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉
onLoad：事件是当图片加载完成之后触发
onAbort：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载”
例如：当一个图片显示失败之后需要连接另一个图片的时候可以这样写
<img src="http://avatar.csdn.net/1/2/F/3_clp880710.jpg" style="width: 200px;height: 100px"
onerror="javascript:this.src='http://www.baidu.com/img/bdlogo.gif'" />
把上面正确的地址改成错误的地址时就会加载百度的图片
例如，你可能会利用这个onAbort消息来警告用户，提醒他们停止某个重要图像的加载，例如图像映射：
<img src="pics/camnpr.gif" usemap="#map1" onAbort="window.alert('注意:这张照片含有重要的链接,请重新载入.')">
同时有另一个问题出现：如果onerror="this.src='图片'"，这个"图片"也不存在时，就会出现下边的错误：
img图片没找到onerror事件 Stack overflow at line: 0
IE下打开网页时，会弹出“Stack overflow at line: 0”的弹框。经分析，这个bug是由于img标签的onerror事件引起的。程序中用到的代码片段如下：正常情况下显示src所指路径的图片，加载失败时显示通过img标签的onerror事件显示另一张图片，问题就出现在了这里，当另一张图片也不存在时，就造成了循环触发onerror事件，在IE下就会弹出“stack overflow”的弹框。
解决的方法也很简单，在重新给img的src属性赋值时，先将onerror事件清除掉，再赋值，这样就不存在循环调用的问题了，代码段如下：
<img src="http://avatar.csdnnet/1/2/F/3_clp880710.jpg" style="width: 200px;height: 100px"
onerror="this.onerror='';this.src='http://www.baidu.com/img/bdlogo.gif'" />
当时竟然做成在后台判断图片是否存在，这样考虑的就要有防火墙的问题了，所以能在客户端解决的就在客户端解决。尽量不要依赖在服务端
网友评论