Gracefully load images, integrated with Vue.js.
- Only 5.3KB minified while 2.3KB gzipped
- Integrated with Vue.js as a plugin
- Loading indicator and error indicator
- Able to specified aspect ratio of container
- Able to crop image overflowed
- Able to customize indicator styles
Register the plugin first.
import Vue from 'vue'
import vueBrush from 'vue-brush'
Vue.use(vueBrush)
new Vue()Then, use it anywhere.
<template>
<div id="app">
<brush source="https://example.com/image.jpg" :ratio="1280 / 720" />
<brush source="https://example.com/avatar.jpg" cropped />
</div>
</template>| Property | Type | Required | Description | Default |
|---|---|---|---|---|
source |
String | N | The URL of image. | null |
ratio |
Number | N | The ratio of image width to height. | 1 |
cropped |
Boolean | N | Whether to crop image overflowed. | false |