A reusable directive for Vue.js that loads an image requiring authentication and includes it as data in-line in your web pages.
Contrary to other HTTP requests, browsers don't send common headers such as
Authorization when retrieving an image specified in a
This Vue.js directive overcomes this limitation by providing a way to load your
images as any other resources and then embedding them into your web pages using
data:image/FILETYPE;base64 URI scheme.
- vue: ^2.0.0
- axios: >= 0.5.0
$ npm install vue-auth-image --save
Using a CDN
<!-- OR -->
vue-auth-image with Nuxt.js, start by creating
a new plugin file name
vue-auth-image.js in your
plugins/ directory. Add
the following content to it:
Then, add the plugin to your
nuxt.config.js at the root of your project:
A directive that requests an image URI asynchronously and embed it into your
<img> tag using the data URI scheme.
;;;// register vue-auth-image directiveVue;// set Authorization header used by axiosvar authHeader = 'Bearer ' + localStorage;axiosdefaultsheaderscommon'Authorization' = authHeader;
Once the directive is registered, you can use it in your Vue templates.
/example for a demo. To build it, run
npm install && npm run build.