vue-oss-image v1.2.1

Vue OSS Image

A custom directive designed for Vue 3 to generate Alibaba Cloud OSS image URLs.

Quick Start

npm install vue-oss-image --save

import { createApp } from 'vue'
import VueOssImage from 'vue-oss-image'
import App from './App.vue'

const app = createApp(App)
app.use(VueOssImage, {
  // global options
  host: 'https://test.com',
  resizeMode: 'fill'
})
app.mount('#app')

<img v-img="'example.jpg'">
<!-- => src="https://test.com/example.jpg" -->

<img v-img="{ host: 'https://demo.com', path: '/example.jpg', width: 100, height: 50, ratio: 2 }">
<!-- => src="https://demo.com/example.jpg?x-oss-process=image/resize,m_fill,w_200,h_100" -->

<div v-img="{ path: 'example.jpg' }"></div>
<!-- => style.backgroundImage = 'url(https://test.com/example.jpg)' -->

Options

See more

Advanced Usage

Custom Properties and Methods

const myOssImage = VueOssImage.create({
  // global options
})
myOssImage.prototype.$compose = () => {}
// Using myOssImage instead of the global options object
app.use(VueOssImage, myOssImage)

Custom Directive Name

const myOssImage = VueOssImage.create({
  // global options
})
// In this case, there's no need to use `app.use`
app.directive('my-directive', VueOssImage.createHooks(myOssImage))

Using with the VueLazyload Library

// <script setup>
const loadingUrl = VueOssImage.compose({
  host: 'https://test.com',
  path: 'loading.png'
})
const errorUrl = VueOssImage.compose({
  host: 'https://test.com',
  path: 'error.png'
})

<div v-lazy-container="{ selector: 'img', loading: loadingUrl, error: errorUrl }">
  <img v-img="{ path: 'example.jpg', attr: 'data-src' }">
</div>

See more

License

MIT