🌉 Multiservice Image Placeholder Vue component
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