vue-brush

Gracefully load images, integrated with Vue.js.

Live demo

Features

• 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

Usage

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>

Options

<brush>

| 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 |

License

MIT