Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

vuejs-image-placeholder

0.3.0 • Public • Published

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

install

npm i vuejs-image-placeholder

Downloadsweekly downloads

11

version

0.3.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability