前端解决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()方法是我在别人的文章看到的，找不到地址了，抱歉。