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
          }
        }
      }
    }