解决webp图片格式IE浏览器不兼容性问题

这两天把博客,图片格式改了一下,今天晚上,正好用ie浏览器打开pdf文件,然后突然想起,试试这个浏览器的兼容性,

发现图片加载不出来了,报错了

无法对位于 URL“https://img.blyoo.com/ZJIMG/2018/08/daa5e1b8375e08fc1ee58daa84865e26.jpg?x-oss-process=image/resize,P_10,m_mfit,w_888,h_700/format,webp/quality,Q_60/watermark,image_d2F0ZXJtYXJrLnBuZw==,t_90,g_se,x_10,y_10”且 MIME 为“image/webp”的图像进行解码。

然后网上查了一下,原来是这个智障ie不兼容,

然后通过php在浏览器上测试了一下

谷歌浏览器支持webp

ie不支持

360支持

火狐不支持

我还有个baidu浏览器,那个没试了,按理来说他应该是支持的。

后面我又测试了一下

我直接打开图片地址在浏览器上,发现自带ie出现乱码,则google正常显示,那就是兼容问题没错了,

上图为google

上图为ie

解决办法

请参考:https://blog.csdn.net/maquealone/article/details/78125648

上面博客有通过前端的,

通过ajax加载的话,可以通过前端方法判断

我是后端直接生成的,所有我直接选择了通过后端判断,

我的写法:

/**
 * 取浏览器头部信息
 * @return string
 */
function get_header_accept(){
    $accept=$_SERVER['HTTP_ACCEPT'];

    if(strpos($accept, 'image/webp') === false) {
        return 'jpg';
    } else{
        return 'webp';
    }
}

然后这样使用:

img.blyoo.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg?x-oss-process=image/resize,?x?x?x?/format,'.get_header_accept();

最厚

不支持webp的ie浏览器变成jpg格式

支持webp的浏览器还是webp格式

评论

时隔变迁,评论已自动关闭