图片加载错误,显示默认图片

  • 2019-01-08
  • 0
  • 0

图片一般用的就是两种情况,img标签和css背景图,下面就这两种情况图片不存在、出错时候,显示默认图片解决方法和一些注意的地方

1. img标签

  • 现象

    图片加载错误,浏览器会出现如下显示,爱美观的我们,怎么能忍受

  • 解决方法:

    借用img标签的onerror事件和javascript,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下:

<img src="images/logo.png" onerror="this.src='images/logoError.png';">

当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个logoError.png 图片。 也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。

  • 坑:

    如果logoError.png 也不存在,则继续触发 onerror,导致循环,故会出现打开网页时提示 Stack overflow at line: 0错误。特别说明:如果图片存在,但网络很不通畅,也可能触发 onerror。
    最终解决方法:控制它不循环,代码如下:

<script type="text/javascript">
  function nofind(){ 
    let img = event.srcElement;
    img.src = "images/logoError.png"; 
    img.onerror = null; //控制不要一直跳动 
  }
</script> 

<img src="images/logo.png" onerror="nofind();" />

2.css背景图

css背景图加载错误不会有img标签那样,但是你想要实现图片出错,显示默认图片的效果,其实很简单,样式就可以解决,代码如下:

<style>
  .img {
    width: 200px;
    height: 200px;
    background-image: url('images/logo.png'), url('images/logoError.png'); /* 当logo加载出错显示出错,就会显示第二张图 */
  }
</style>
<div class="img"></div>

这个原理其实就是前面的图片在后面的图片上面,当两张图都有的时候,其实都渲染出来了,只是第一张在上面,覆盖了,当第一张加载失败,无法显示,自然就显示出下面的第二张图了

最后,关于图片是使用img还是背景图,看个人情况吧,我也说不好,不过我个人倾向于背景图,因为css3背景图加了很多属性,可以去控制图片,比如剪切、多背景图、定位等,比起标签更好控制。

评论

还没有任何评论,你来说两句吧