前端解决webp格式图片的兼容

webp格式的图片就不详细介绍了,目前是只有Chrome 谷歌浏览器支持的。

方法一、用一张png或者jpg图来代替,提示用户无法展示图片

// 替换文章详情内容里的图片
let content = res.content
if (!supportWebp) {
    content = content.replace(/src.*?.webp\"/g, 'src=' + ‘你要替换的图片地址’)
}
$content.html(content)

// 判断是否支持webp格式图片 支持 返回true   不支持 返回false
function check_support_webp() {
    const isSupportWebp = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
    console.info(isSupportWebp)
    return isSupportWebp
}

备注:check_support_webp()方法是我在别人的文章看到的,找不到地址了,抱歉。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容