Customize the instruction itself

Path: the SRC/directives/index. Js

Export const imageError = {// INSERTED current DOM Executes inserted(dom, Onerror = function() {SRC dom.src = options.value} }},Copy the code

The man.js loop introduces all custom directives

Import * as directives from '@/directives' // Import a custom directive // Object.keys to an array and loop through the array with forEach ForEach (key => {// register global directives,key is the directive name (for the cycled Object property). Directives (key, directives[key]) })Copy the code

Component uses the custom directive V-ImageError

<img v-imageError ="defaultAvatar" // Custom directive passes a default image: SRC ="staffPhoto" class="user-avatar" /> data() {return { DefaultAvatar: require('@/assets/common/head.jpg'), // image path}; },Copy the code