飞牛士 飞牛士
  • 首页
  • 杂谈
  • 摘记
  • 代码
  • 资源
  • 注册
    登录
现在登录。
  • 首页
  • 杂谈
  • 摘记
  • 代码
  • 资源
  • 网友来稿
  • 其他
    • 留言
    • 投稿
    • 邻居
首页 代码 开启cdn后webp图片加载异常(已解决)

开启cdn后webp图片加载异常(已解决)

飞牛 3月 8, 2021

最近折腾对象存储和cdn,经过踩了无数的坑,终于一点一点解决了问题,打开页面的时候有时候会有一些图片无法获取,显示图片报错:net::ERR_HTTP2_PROTOCOL_ERROR 200,需要多次刷新页面,图片才会出现。但是有时候刷新很多次也不会显示。在网上搜索解决办法,将解决问题的过程记录如下:

首先是查询到,说是宝塔面板的防火墙问题,尝试关闭防火墙,重启服务器,问题依旧,此项排除。

其次,怀疑证书问题,但是在宝塔面板查询网站ssL配置和腾讯云后台看到cdn域名配置的证书都是正确的,此项排除。

再次,网上介绍说是nginx的问题,说部分cdn也可能有这个问题,通过在 nginx config server 里加上proxy_max_temp_file_size 0;。但是飞牛按照介绍,添加上了这段代码,重启nginx,问题依然没有解决。

最后,查了半天资料发现没有解决的方案,飞牛只能继续研究几个图片不能正常显示的页面。在新页面打开图片地址是能正常显示,但是在页面中就不能正常显示,刷新几次后,图片偶尔能显示出来。飞牛尝试右键另存图片,发现了关键所在。原始图片是jpg格式,另存图片的时候,显示的是webp格式。开启cdn后webp图片加载异常(已解决)-飞牛士

问题也许就出现在webp格式上,飞牛记得在配置cdn的时候,有个图片优化,开启了webp自适应。

开启cdn后webp图片加载异常(已解决)-飞牛士

以上为腾讯云官方解释

飞牛到后台关闭了webp自适应,发现图片能正常显示了,测试其他网页,也能正常显示。没有net::ERR_HTTP2_PROTOCOL_ERROR 200报错。开启cdn后webp图片加载异常(已解决)-飞牛士

目前暂时解决,舍弃了webp的自适应功能。具体是什么原因导致,由于飞牛非专业人员,无法解释。遇到的问题不一样,解决的方法不一样,如果你遇到net::ERR_HTTP2_PROTOCOL_ERROR 200此类问题,你可以按照上面提到的逐项测试排查。

3月13日更新,直接在cdn配置里面,将jpg;png等图片格式添加到智能压缩可以解决webp自适应问题。

#cdn#wordpress#wordpress优化加速#折腾
0
飞牛
一个互联网资深菜鸟
评论 (7)
返回
  • 林羽凡

    要用腾讯云cdn图片webp,你的图片满足它提到5个格式,并且头部包含 image/webp,就自动对图片进行转码了,也就是返回Webp处理后的webp图片,这也就是为啥你另存图片显示webp的原因了。这类处理过的图片加载速度快,cdn也是为了节省带宽。最后,开启webp没成功加载图片,你确定页面没问题后,问下他们客服,问题可能就出在他们那。

    1年 前 回复
    • 飞牛

      @林羽凡 已经反复测试了很多次了,图片格式是满足的,头部也包含了。也有可能和页面加载缓存有关,特别是图片比加载失败的情况。

      1年 前 回复
    • 林羽凡

      @飞牛 那就基本能确定是他们的问题了,提交个工单看看啥情况。

      1年 前 回复
    • 飞牛

      @林羽凡 就怕提交工单,技术那边遇不到情况,不好分析。

      1年 前 回复
    • 林羽凡

      @飞牛 你要给他们一个提高自我价值的机会,哈哈哈哈,真正的工程师是很喜欢研究新问题的。

      1年 前 回复
  • 夏目贵志

    不知道跟缓存有没有关系,我使用纯静态博客的时候就没有这个问题,搬回typecho 使用nginx+php 就碰到过。后面图片还是存放本地,这个问题就没了。

    1年 前 回复
    • 飞牛

      @夏目贵志 缓存我刚才测试了一下,本地缓存没有联系。那么只能是cdn的缓存问题了,目前还没找到具体办法。

      1年 前 回复
飞牛
一个互联网资深菜鸟
76
文章
245
评论
28
获赞
随机推荐
Discuz! X3.4 邮件设置(以qq邮箱为例)
1月 31, 2021
王太平的手机摄影讲座学习笔记
2月 9, 2021
Discuz! tools工具箱-找回管理员创始人密码
1月 29, 2021
这是一个离奇却又平淡的故事
2月 19, 2021
王太平:手机摄影专题讲座
2月 9, 2021
  • 关于飞牛
  • 给我留言
  • 友情链接
Copyright © 2006-2022 飞牛士.