https://github.com/astagi/vue-image-placeholder
🌉 Vue Image Placeholder component
https://github.com/astagi/vue-image-placeholder
images vue vuecomponent
Last synced: 10 months ago
JSON representation
🌉 Vue Image Placeholder component
- Host: GitHub
- URL: https://github.com/astagi/vue-image-placeholder
- Owner: astagi
- License: mit
- Created: 2020-03-04T17:12:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T03:55:40.000Z (over 3 years ago)
- Last Synced: 2025-03-28T17:05:28.642Z (over 1 year ago)
- Topics: images, vue, vuecomponent
- Language: TypeScript
- Homepage:
- Size: 1.06 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Image Placeholder
[](https://www.npmjs.com/package/vue-image-placeholder) [](https://travis-ci.org/astagi/vue-image-placeholder) [](https://codecov.io/gh/astagi/vue-image-placeholder) []()
🌉 Multiservice Image Placeholder Vue component
## Installation
```sh
yarn add vue-image-placeholder
```
## Use it in your app
```ts
import ImagePlaceholder from 'vue-image-placeholder';
```
Render an image with `cats` from [LoremFlickr](https://loremflickr.com/) service
```html
```
Image Placeholder component also supports [Placeholder.com](https://placeholder.com/) service, use `text` to show a label in the placeholder
```html
```
## Properties
`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/](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](https://www.fillmurray.com/) service.
- `'seagal'` return an image of Steve Seagal from [Steven Segallery](https://www.stevensegallery.com/) 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).
## Project setup for development
```sh
yarn install
```
### Compiles and minifies for production
```sh
yarn build
```
### Run unit tests
```sh
yarn test:unit
```
### Lints and fixes files
```sh
yarn lint
```