html
<img :src="isWebp ? item.avatar : item.avatar + '.org'" class="avatar" @error="error(item,$event)" @load='load(item)'>
js
export default {
name: "App",
data () {
return {
item{
avatar:‘’,
status:0,
},
isWebp: true
}
},
created () {
this.isWebp = this.suportWebp() //判断是否支持webp格式
},
methods: {
error (item, e) { // 图片加载出错
if (item.status == 0) {
e.target.src = item.avatar;
item.status = 1;
}
},
load(){ //图片加载完成
},
suportWebp () {
const support = localStorage.getItem("supportWebP");
if (support === "true") {
return true;
} else if (support === "false") {
return false;
} else {
const img = new Image();
img.src =
"data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA";
img.onload = () => {
const result = img.width > 0 && img.height > 0;
if (result) {
localStorage.setItem("supportWebP", "true");
return true
} else {
isWebp.setItem("supportWebP", "false");
return false
}
}
}
}