Setup
Vue/Nuxt
安装 @awesome-image/image
yarn add @awesome-image/image
yarn add @awesome-image/image
yarn add @nuxtjs/composition-api
Usage
Default Options
const defaultOptions: AsImageOptions = {
quanlity: 0,
format: '',
lazy: false,
placeholderLazyOffset: '0px',
imageLazyOffset: '0px',
responsive: false,
progressive: false,
breakpoints: [640, 768, 1024, 1280, 1536],
sizes: '100vw',
imageUrlGenerator: (src) => src,
duration: 1,
autoWebp: false,
}
Global
main.js
import AsImage from '@awesome-image/image'
import '@awesome-image/image/dist/style.css'
// import { imageUrlGeneratorFP } from '@awesome-image/services'
// read more about http://imageUrlGenerator
Vue.use(AsImage, {
responsive: true,
progressive: true,
imageUrlGenerator: yourImageUrlGenerator
})
main.js
import AsImage from '@awesome-image/image'
import '@awesome-image/image/dist/style.css'
// import { imageUrlGeneratorFP } from '@awesome-image/services'
// read more about http://imageUrlGenerator
createApp().use(AsImage, {
responsive: true,
progressive: true,
imageUrlGenerator: yourImageUrlGenerator
})
./plugins/as-image.js
// add ./plugins/as-image.js
import AsImage from '@awesome-image/image'
import '@awesome-image/image/dist/style.css'
// import { imageUrlGeneratorFP } from '@awesome-image/services'
// read more about http://imageUrlGenerator
Vue.use(AsImage, {
responsive: true,
progressive: true,
imageUrlGenerator: yourImageUrlGenerator
})
nuxt.config.js
// add plugin path to nuxt.config.js
{
plugins: [
'~~/plugins/as-image.js'
]
}
Local
<script>
import AsImage from '@awesome-image/image'
import '@awesome-image/image/dist/style.css'
// import { imageUrlGeneratorFP } from '@vue-awesome-image/services'
// read more about http://imageUrlGenerator
export default {
components: {
AsImage
}
}
</script>
<template>
<AsImage
class="banner"
:image-url-generator="yourImageUrlGenerator"
:width="2800"
:height="1400"
:src="'//d3skwsdk169y0b.cloudfront.net/image/banner/1.jpg'"
:lazy="true"
:progressive="true"
:responsive="true">
<template #loading>
<div class="placeholder"></div>
</template>
</AsImage>
</template>
Browser
Add @awesome-image/image
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.12.1/lib/index.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/vue2/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.12.4/lib/index.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/vue3/index.umd.js"></script>
Add css
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/style.css"
/>
Usage
Loading CodeSandbox...