现在网页上随处可见图片，但难免有时图片资源失效，在谷歌浏览器中会这样显示这里的alt属性是在图片加载失败时告诉用户图片信息。能美化吗？下面是js方式的几种方式，相信遇到这种问题的，搜索结果一般都是使用图片的onerror方法。onerror事件会在文档或图片加载过程中发生错误时触发。如果在加载文档或图像时发生错误，则会调用此事件处理程序。使用方法也很简单不过这个方法必须付费注意保证onerror中分配的图片地址一定不能错，否则会无限调用onerror……页面直接崩溃。有人说，我可以保证。那么，既然可以保证，为什么之前的图片加载失败，启用备份图片呢？当然也可以用base64的方式，缺点就是太长了。。类似下面的SuQ开发还是可以的那么有什么css解决方案吗？当然，如果你只使用兼容主流浏览器的css方式，这里提供伪元素的两种方式。虽然img是一个单标签![]()
，不能包裹其他元素，但是可以包含伪元素。但是这里有一个特点，只有当是图片时才会显示伪元素，只有在加载失败或者没有图片的时候才会显示。这种情况下，我们可以使用伪元素来实现一个默认的提示效果img{display:inline-block;位置：相对；宽度：200px；高度：200px；背景：#ccc；vertical-align:top;}img:after{内容：'';位置：绝对；左：0；顶部：0；宽度：100%；高度：100%；background:url('img/b.jpg')#ccc;}思路很简单，就是用伪元素覆盖原图，不存在图片加载失败的问题。还有一种使用背景图片的方法，就是利用css3div中的多背景特性{background:url(a.jpg),url(b.jpg),url(logo.png);}指定的时候会在浏览器中显示图像堆叠的顺序是从上到下指定的，第一个图像文件放在最上面，最后指定的文件放在最下面。这样，我们也可以显示默认图片。img{宽度：200px;高度：200px；background:url('a.png'),url('logo.png')#f1f1f1}但是这个方法本质上是多张图片重叠。如果上层加载失败，下层将可见。也就是说，如果它们都加载成功，那么它们都是存在的。然后注意，如果上图有透明部分，有可能看到下图，漏光！如上，两张图片都加载成功，可以看到底图，因为上层有透明部分。因此，在使用这种情况时，需要使用.jpg图片，避免曝光。上一节介绍了三种设置默认图片的方法。兼容性方面，js的方式是最适配的，可以兼容低版本的ie，其他的两个都不行，注意备份图片地址，不要搞错。个人比较推荐第二种伪元素方式，纯css方式，html不能进行任何修改，适合现有项目的体验升级，有体验更好，没有无伤大雅。第三个可以作为娱乐。将其视为一种思维方式。毕竟，没有语义。如果给一个div，别人就不知道是图片了，对搜索引擎也不好。友好的。大家有更好的方法吗？^^如果你喜欢我的博客，可以多多关注
