自定义指令处理头像加载失败

src/directives/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+// 全局指令: 图片加载失败
+Vue.directive('imgerror', {
+  // dom被插入到组件中时, 第二个参数
+  inserted(el, options) {
+    // console.log(el)
+    el.onerror = function() {
+      el.src = options.value
+    }
+  }
+})

src/layout/components/Navbar.vue

@@ -11,7 +11,7 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img src="$store.getters.staffPhoto" class="user-avatar" @error="photoErrorHandle">
+          <img v-imgerror="require('@/assets/common/bigUserHeader.png')" src="$store.getters.staffPhoto" class="user-avatar">
           <span class="name">{{ $store.getters.name }}</span>
           <i class="el-icon-caret-bottom" style="color:#fff" />
         </div>
@@ -54,11 +54,6 @@ export default {
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-    },
-    // 头像加载失败处理
-    photoErrorHandle(e) {
-      // console.log(e.target)
-      e.target.src = 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1851283359,3457678391&fm=26&gp=0.jpg'
     }
   }
 }

src/main.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import '@/directives'
 
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets