Package Exports

vue-auth-image

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-auth-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-auth-image

A reusable directive for Vue.js that loads an image requiring authentication and includes it as data in-line in your web pages.

Overview

Contrary to other HTTP requests, browsers don't send common headers such as Authorization when retrieving an image specified in a <img> tag.

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 the data:image/FILETYPE;base64 URI scheme.

Requirements

vue: ^2.0.0
axios: >= 0.5.0

Install

npm

$ npm install vue-auth-image --save

Using a CDN

<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>

Using Nuxt.js

To use 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'
]

API

auth-image

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>

See /example for a demo. To build it, run npm install && npm run build.

License

MIT