Vue图片加载失败后设置默认图片

296 阅读1分钟

直接上代码

  • parameters.js
export default {
  avatar: require("@/assets/images/default/avatar.png")
};
  • defaultImg.ts
import Vue from "vue";
import parameters from "parameters";

Vue.directive("default-img", {
  bind: function(el, binding) {
    el.onerror = function() {
      let arg = parameters[binding.arg];
      if (arg) {
        el.onerror = null;
        el.src = arg;
      }
    };
  }
});

How to use?

<img v-default-img:avatar :src="Avatar" />