vue-image-badge

A Vue component to add badges to images

Table of Contents

• Installation
• Usage
• Documentation
• Development
• License

Installation

npm install -S vue-image-badge

Usage

In your HTML

<badge imagesrc="pathto/yourimage.jpg" text="1" imageClass="css-class-for-image"/>

To use it globally

import Vue from 'vue'
import { VueImageBadge } from 'vue-image-badge'
 
Vue.use(VueImageBadge);
 

or only in a single component

import { VueImageBadge } from 'vue-image-badge'
export default {
  name: 'myapp',
  components: {
    'badge': VueImageBadge
  }
}

Note, if you are using web-pack, you should specify the image url using require, e.g.

import { VueImageBadge } from 'vue-image-badge'
export default {
  name: 'app',
  components: {
    'badge': VueImageBadge
  },
  data: function () {
    return {
      imageSrc: require('./assets/images/image.jpg')
    }
  }
}

Props

Property	Type	Default	Description
imagesrc	string		path to image
text	string		text to display in badge
imageClass	string		class for the the img tag

License

This project is licensed under the MIT License - see the LICENSE.md file for details.