• 欢迎访问ByWei.Cn,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,加入百味博客 QQ群
  • 已升级为最新版主题,并将持续优化改造中,支持说说碎语功能,可像添加文章一样直接添加说说,博客主题升级啦
  • 感谢您百度求点赞啊!百度网址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏百味博客吧
  • 博主热烈欢迎 软件定制开发 联系:http://www.bywei.cn

图片加载失败404处理方案:JavaScript处理或者nginx服务返回端默认图片

Web前端 bywei 3个月前 (09-07) 439次浏览 0个评论 扫描二维码

在网站设计制作或者小程序开发等前端开发工作过程中,图片作为直达用户的有效媒介,涉及到图片能否正常加载显示,是产品用户体验的关键环节。本文将针对图片加载失败的情况提出相关的解决方案。
图片加载失败

网页端处理图片加载失败方案

网站加载图片 404 时,一般会设置默认显示图片,通过占位符的形式体现。前端可使用 JavaScript 的 onerror 设置默认图像显示代替 alt。

<img width="32" height="32" src="图片的 url 地址" alt="图片 XX" onerror="this.src='默认图片的 url 地址;this.onerror=null'"/>

nginx 配置返回默认图方案

另外一种思路就是在 nginx 服务端直接返回默认图片,简单来说就是 nginx 图片不存在时给一张默认图片,并且还可以自定义状态码标记,以便收集统计该类型错误,这种方法也适用于小程序加载图片失败默认图片的替换方法。具体示例如下

1、将选好的 nopic.gif 默认图片放在对应目录下 html/qiqufang;目录下;

2、修改 nginx 的配置文件:

        error_page 404 =423  @404;

        location @404 {
           if ( $request_uri ~* \.(gif|jpg|jpeg|png|bmp)$ ) {
             root html/qiqufang;
             rewrite ^(.*)$ /nopic.gif break;
           }
        }

3、图片加载失败演示效果

图片 404 加载失败


百味博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:图片加载失败 404 处理方案:JavaScript 处理或者 nginx 服务返回端默认图片
喜欢 (0)
[微信扫一扫]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址