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