调用图片出错不显示红叉的3种方法_迪一_新浪博客

网页中图片显示为红叉原因一般是图片调用路径出错、调用图片地址失效或者无图片等,页面上显示红叉会影响网页美观,主要有3种解决方法,让找不到图片时不显示红叉。
一、替换图片,将找不到或不显示的图片显示为一张默认图片。代码如下:
<img src="image/pic.jpg" onerror="src="http://www.sdggw.com/Skins/Default/images/logo.gif " />
注: pic.jpg不存在的时将替换显示logo.gif图片。
二、JS将找不到或不显示的图片显示指定的错误文字信息。代码如下:
HTML代码
<script type="text/javascript">
var imgErr = function(imgObj){
imgObj.parentNode.innerHTML = '<strong>图片显示错误!</strong>';
}
</script>
<div>
  <img id="image" src="ifu25.cn" onerror="imgErr(this);" />
</div>
三、CSS将找不到或不显示的图片隐藏,显示为空白。代码如下:
<img src="http://www.sdggw.com/Skins/Default/images/logo.jpg " onerror="this.parentNode.removeChild(this)"style="display:none" onload="this.style.display='block'" />

第二种方法也可以把script中的文字去掉,调用图片找不到的结果和第三种方法一样,调用出错后不显示图片的红叉隐藏,显示为空白。
已投稿到:
郑重声明:资讯 【调用图片出错不显示红叉的3种方法_迪一_新浪博客】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——