astagi / vue-image-placeholder

🌉 Vue Image Placeholder component

Vue Image Placeholder

🌉 Multiservice Image Placeholder Vue component

Installation

yarn add vue-image-placeholder

Use it in your app

import ImagePlaceholder from 'vue-image-placeholder';

Render an image with cats from LoremFlickr service

<ImagePlaceholder width=500 height=250 images="cats" />

Image Placeholder component also supports Placeholder.com service, use text to show a label in the placeholder

<ImagePlaceholder
  width=250 text="Hello Vue!"
  foreground="#34495e" background="#41B883"
/>

Properties

width final image width (required)

height final image height (default is equal to width)

images category/categories for the image (if not specified the main service used is https://placeholder.com/):

• single value returns an image of one category (e.g. 'cats').
• comma separated value returns an image belonging to both categories (e.g. 'animals,cat').
• pipe separated value returns an image belonging to one of the categories (e.g. 'animal|cats').
• 'murray' returns an image of Bill Murray from Fill Murray service.
• 'seagal' return an image of Steve Seagal from Steven Segallery service.

The following properties are only for Placeholder.com service:

text text to show inside the image.

background background color for the placeholder (e.g. #000000).

foreground foreground color for the placeholder (e.g. #FFFFFF).

Project setup for development

yarn install

Compiles and minifies for production

yarn build

Run unit tests

yarn test:unit

Lints and fixes files

yarn lint