vue-webp-image

A vue directive help check browser webp support and use the appropriate image format.

- Compatible with Vue3 and Vue2
- Lightweight (700b)

Installation

``sh
npm install vue-webp-image --save
`

Usage

#### main.js

- Vue3

`javascript
import { createApp } from 'vue';
import App from './App.vue';
import VueWebpImage from 'vue-webp-image';

const app = createApp(App);
app.use(VueWebpImage);
app.mount('#app');
`

- Vue2

`javascript
import Vue from 'vue';
import VueWebpImage from 'vue-webp-image';

Vue.use(VueWebpImage);
`

#### Component

- v-webp:src - use with img tag

`html

v-webp:src="require('./assets/image.webp')"
:src="require('./assets/image.jpg')"
/>

v-webp:src="'https://www.xxx.com/image.webp'"
:src="'https://www.xxx.com/image.jpg'"
/>
`

- v-webp:bg - use css background-image property

`html
class="bg-container"
v-webp:bg="require('./assets/image.webp')"
>