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.
$ npm install vue-auth-image --save
<script src="https://cdn.jsdelivr.net/npm/vue-auth-image/vue-auth-image.js"></script> <!-- OR --> <script src="https://cdn.jsdelivr.net/npm/vue-auth-image/vue-auth-image.min.js"></script>
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:
import Vue from 'vue'; import VueAuthImage from 'vue-auth-image'; Vue.use(VueAuthImage);
Then, add the plugin to your
nuxt.config.js at the root of your project:
plugins: [ '@/plugins/vue-auth-image.js' ]
A directive that requests an image URI asynchronously and embed it into your
<img> tag using the data URI scheme.
import axios from 'axios'; import Vue from 'vue'; import VueAuthImage from 'vue-auth-image'; // register vue-auth-image directive Vue.use(VueAuthImage); // set Authorization header used by axios var authHeader = 'Bearer ' + localStorage.getItem('id_token'); axios.defaults.headers.common['Authorization'] = authHeader;
Once the directive is registered, you can use it in your Vue templates.
<template> <div> <img v-auth-image="https://api.app.com/images/authenticatedImg.png"> </div> </template>
/example for a demo. To build it, run
npm install && npm run build.