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

| Name | Global | Directive | .compose | Description | |-|:-:|:-:|:-:|-| | quality | ✅ | ✅ | ✅ | [Number] Quality, supports integers from 1 to 100 | | format | ✅ | ✅ | ✅ | [String] Format conversion, supports webp jpg png bmp gif tiff | | resizeMode | ✅ | ✅ | ✅ | [String] Resize mode, supports fill lfit mfit pad fixed, default is fill | | ratio | ✅ | ✅ | ✅ | [Number] Resize ratio, default is window.devicePixelRatio | | loading | ✅ | ✅ | 🚫 | [String] Displayed during loading, with other behaviors consistent with path | | error | ✅ | ✅ | 🚫 | [String] Displayed in case of loading error, with other behaviors consistent with path | | attr | ✅ | ✅ | 🚫 | [String] Specify the attribute for replacing the image URL, default is determined based on the element's tagName | | host | ✅ | ✅ | ✅ | [String] The prefix for the image URL | | path | 🚫 | ✅ | ✅ | [String] If it starts with http(s)://, host will be ignored. If it's a base64 image, it will be returned as a complete URL | | width | 🚫 | ✅ | ✅ | [Number] Cannot be used with long or short | | height | 🚫 | ✅ | ✅ | [Number] Cannot be used with long or short | | long | 🚫 | ✅ | ✅ | [Number] Cannot be used with width or height | | short | 🚫 | ✅ | ✅ | [Number] Cannot be used with width or height |

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