Vuejs Image Placeholder

svg image placeholder

Creates a customisable svg image placeholder

Install

npm install vuejs-image-placeholder

Usage

All props are optional

Basic

<image-placeholder
    :width="200"
    :height="200"
    :background-colour="#ddd"
    :border-colour="#000"
    :border-width="2"
    :show-ratio="true"
    :font-family="Tahoma, sans-serif"
    :font-colour="#333"
    :font-size="18"
></image-placeholder>

By default the image shows the dimensions, using showRatio prop the ratio can displayed instead. Alternatively you can provide your own text.

<image-placeholder>My Custom Text</image-placeholder>

Available props

Prop	Type	Default	Description
width	Number	200	Img width
height	Number	150	Img height
backgroundColour	String	#ccc	Background colour
borderColour	String	#333	Border colour
borderWidth	Number	1	Border width
showRatio	Boolean	false	Show image size in pixels or the proportion ratio
fontFamily	String	monospace	Font for the display text
fontColour	String	#333	Display text colour
fontSize	Number	14	Display text size