vue-responsive-image-loader
響應式圖片元件
功能
- 讓圖片依照傳入的
sizes
設定載入顯示 - 當圖片載入失敗時,嘗試載入其他尺寸的圖片
- 圖片載入動畫效果
Props
名稱 | 資料型別 | 必須 | 預設值 | 說明 |
---|---|---|---|---|
images | Object | V |
{ original: ''} |
圖片設定,範例: { w400: 'https://i.imgur.com/JWLBxWl-w400.jpeg', original: 'https://i.imgur.com/JWLBxWl.jpeg' } ,w400 為寬度 400 以上時,要載入的圖片設定 |
sizes | String | 100vw |
請參考: The Image Embed element#sizes | |
alt | String | '' |
替代文字 | |
backgroundColor | String | rgba(0, 0, 0, 0) |
預設背景顏色 | |
height | Number | null |
圖片高度 | |
width | Number | null |
圖片寬度 | |
showLoadingEffect | Boolean | true |
是否顯示載入特效 |
使用說明
安裝
yarn install @readr-media/vue-responsive-image-loader
在元件中使用
<template>
<ResponsiveImageLoader :images="image" :alt="alt" />
</template>
<script>
// 導入元件
import { ResponsiveImageLoader } from '@readr-media/vue-responsive-image-loader'
export default {
components: {
ResponsiveImageLoader,
},
data() {
return {
images: {
w400: 'https://i.imgur.com/JWLBxWl-w400.jpeg',
original: 'https://i.imgur.com/JWLBxWl.jpeg'
}
}
}
}
</script>
<style>
// 導入 CSS,請使用 style,不要使用 style scoped
@import '@readr-media/vue-responsive-image-loader/dist/style.css';
</style>
客製化載入效果
<template>
<ResponsiveImageLoader :images="image" :alt="alt">
<template v-slot:loading>
<!-- 客製化載入效果請放這裡 -->
</template>
</ResponsiveImageLoader>
</template>