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

技术文档72,212阅读模式

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

首先是查询到,说是宝塔面板的防火墙问题,尝试关闭防火墙,重启服务器,问题依旧,此项排除。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1107.html

其次,怀疑证书问题,但是在宝塔面板查询网站ssL配置和腾讯云后台看到cdn域名配置的证书都是正确的,此项排除。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1107.html

再次,网上介绍说是nginx的问题,说部分cdn也可能有这个问题,通过在 nginx config server 里加上proxy_max_temp_file_size 0;。但是飞牛按照介绍,添加上了这段代码,重启nginx,问题依然没有解决。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1107.html

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

问题也许就出现在webp格式上,飞牛记得在配置cdn的时候,有个图片优化,开启了webp自适应。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1107.html

开启cdn后webp图片加载异常(已解决)文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1107.html

以上为腾讯云官方解释文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1107.html

飞牛到后台关闭了webp自适应,发现图片能正常显示了,测试其他网页,也能正常显示。没有net::ERR_HTTP2_PROTOCOL_ERROR 200报错。开启cdn后webp图片加载异常(已解决)文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1107.html

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

3月13日更新,直接在cdn配置里面,将jpg;png等图片格式添加到智能压缩可以解决webp自适应问题。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1107.html 文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1107.html

评论  7  访客  5  作者  2
    • 林羽凡
      林羽凡 5

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

        • 飞牛
          飞牛

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

            • 林羽凡
              林羽凡 5

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

                • 飞牛
                  飞牛

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

                    • 林羽凡
                      林羽凡 5

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

              • 夏目贵志
                夏目贵志 5

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

                  • 飞牛
                    飞牛

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

                匿名

                发表评论

                匿名网友 填写信息

                :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                确定