Vue Image Placeholder

🌉 Multiservice Image Placeholder Vue component

Installation

yarn add vue-image-placeholder

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

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

yarn install

yarn build

yarn test:unit

yarn lint