图片加载异常占位处理
作者:admin 来源: 2022/10/31 17:01:12

    源自:https://www.zhangxinxu.com/wordpress/2020/10/css-style-image-load-fail/

    网站网页中一般会有图片显示,这些图片归根到底是存储在服务器硬盘中的。经历长年累月,某些图片可能会丢失了。这时网页中会如下显示:

    可见非常地不美观。本文提供了一个简单的解决方案。当网页不存在时,图片将自动更换为另外一个图片。

    图片正常显示时:

    图片丢失时:

    

    图片不存在但有异常处理:

CSS代码:
img {
    width: 128px; height: 96px;
    object-fit: cover;
}
img[src$="break.svg"] {
    object-fit: contain;
    outline: 1px solid #ddd;
    outline-offset: -1px;
}
HTML代码:
<img src="71.jpg" onerror="this.src='break.svg';">

     当71.jpg图片不存在时,将触发onerror函数,将图片src替换为break.svg图片。

      我已将代码上传,下载码是:D7BE73E53B

    下载码是啥?如何下载=》点击查看

称      呼:
联系方式:
您的评论:
技术支持:l.w.dong@qq.com www.luweidong.cn
广州市   wx:lwdred
Copyright © 2014 三味书屋 All Rights Reserved
技术支持:l.w.dong@qq.com  sitemap xml  sitemap html

粤公网安备44010602011869号

粤ICP备13031080号-1