@readr-media/vue-responsive-image-loader

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>