Skip to content
svg image placeholder component
JavaScript Vue HTML
Branch: master
Clone or download
Charlie Kassel
Charlie Kassel 0.3.0
Latest commit 2542807 Nov 14, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build set extract to false by default Jun 6, 2017
config first commit Jun 6, 2017
src correct svg sizing Nov 14, 2017
static
test/unit first commit Jun 6, 2017
.babelrc first commit Jun 6, 2017
.editorconfig first commit Jun 6, 2017
.eslintignore first commit Jun 6, 2017
.eslintrc.js first commit Jun 6, 2017
.gitignore first commit Jun 6, 2017
.npmignore first commit Jun 6, 2017
.postcssrc.js first commit Jun 6, 2017
LICENSE first commit Jun 6, 2017
README.md add slot to override text Aug 16, 2017
index.html first commit Jun 6, 2017
package.json 0.3.0 Nov 14, 2017
yarn.lock first commit Jun 6, 2017

README.md

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
You can’t perform that action at this time.