HTML img图片无法显示或出错,用另一张图片替换
2015-05-29 12:06
453 查看
经过分析,发现网页中存在类似如下的代码:
<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" />
分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif,图片不存在将显示 noPic.gif。但问题来了,如果 noPic.gif 也不存在,则继续触发 onerror,导致循环,故出现错误。
说明:如果图片存在,但网络很不通畅,也可能触发 onerror。
解决方法:
第一种::.去掉 onerror 代码;或者更改 onerror 代码为其它;或者确保 onerror 中的图片足够小,并且存在。
第二种:
<script type="text/javascript">
<!–
function nofind(){
var img=event.srcElement;
img.src="http://www.cnblogs.com/sys/common/image/fileoperation/icon/default.gif";
//也能是:img.src="${pageContext.request.contextPath}/static/img/small-sina.ico";
img.onerror=null;// 控制不要一直跳动
}
//–>
</script>
<td align="center"><img src="http://www.cnblogs.com/sys/common/image/fileoperation/icon/${file.suffix }.gif" onerror="nofind();" />${file.name }</td>
<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" />
分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif,图片不存在将显示 noPic.gif。但问题来了,如果 noPic.gif 也不存在,则继续触发 onerror,导致循环,故出现错误。
说明:如果图片存在,但网络很不通畅,也可能触发 onerror。
解决方法:
第一种::.去掉 onerror 代码;或者更改 onerror 代码为其它;或者确保 onerror 中的图片足够小,并且存在。
第二种:
<script type="text/javascript">
<!–
function nofind(){
var img=event.srcElement;
img.src="http://www.cnblogs.com/sys/common/image/fileoperation/icon/default.gif";
//也能是:img.src="${pageContext.request.contextPath}/static/img/small-sina.ico";
img.onerror=null;// 控制不要一直跳动
}
//–>
</script>
<td align="center"><img src="http://www.cnblogs.com/sys/common/image/fileoperation/icon/${file.suffix }.gif" onerror="nofind();" />${file.name }</td>
相关文章推荐
- 如何获取选定部分的HTML
- HTML标签要用推荐标准写法去写,否则浏览器兼容性很差
- VS 2013 是不是不支持 html 的设计视图编辑了?
- HTML VIDEO 通过鼠标移动出发play和pause功能
- HTML中使背景图片自适应浏览器大小
- html上传图片并显示
- PBP: IV. STATIC-HTML-BASED PBP EXPLOITS
- 如何去掉html中的超链接
- 新手学习html的一些总结
- html初步 (一)
- html文件转换成pdf和word
- html元素id 和name的用法区别
- ScriptManager控件的使用
- 动力火车
- 在 html 中用加色法混合颜色
- @Html.Raw()
- 一些自己学习的html代码(锚,动态改变文本和链接,有序无序列表等)
- HTML的meta标签常用属性整理
- HTML
- 给HTML初学者的30条最佳实践