Skip to content

charliekassel/vuejs-image-placeholder

Repository files navigation

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