Integrating vue-auth-image plugin into Nuxt.js

Question

I am trying to integrate vue-auth-image plugin to Nuxt.js.

In plugins/auth-images.js :

import Vue from 'vue'                                                                                                                            
import VueAuthImage from 'vue-auth-image'                                                                                                        
import axios from 'axios'                                                                                                                        
Vue.use(VueAuthImage)                                                                                                                            

if (process.browser) {                                                                                                                           
  const authHeader = 'Bearer ' + localStorage.getItem('my-own-id-token')                                                                         
  axios.defaults.headers.common.Authorization = authHeader                                                                                       
}    

In nuxt.config.js , I call this plugin:

plugins: [                                                                                                                                     
  '@/plugins/auth-images'                                                                                                                   
]

Later in my code, I apply this:

<img v-auth-img="link/to/my/api/endpoint">

In the console I get this:

[Vue warn]: Failed to resolve directive: auth-img

How to fix this?

Answer 1

该指令不是auth-img，而是auth-image，因此正确的代码是：

<img v-auth-image=