vue-auth-image

    0.0.3 • Public • Published

    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.

    npm version

    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

    Install

    npm i vue-auth-image

    DownloadsWeekly Downloads

    554

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    8.68 kB

    Total Files

    10

    Last publish

    Collaborators

    • jlalande