1.5.0 • Published 1 year ago

@readr-media/vue-responsive-image-loader v1.5.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

vue-responsive-image-loader

響應式圖片元件

功能

  • 讓圖片依照傳入的 sizes 設定載入顯示
  • 當圖片載入失敗時,嘗試載入其他尺寸的圖片
  • 圖片載入動畫效果

Props

名稱資料型別必須預設值說明
imagesObjectV{ original: ''}圖片設定,範例: { w400: 'https://i.imgur.com/JWLBxWl-w400.jpeg', original: 'https://i.imgur.com/JWLBxWl.jpeg' },w400 為寬度 400 以上時,要載入的圖片設定
sizesString100vw請參考: The Image Embed element#sizes
altString''替代文字
backgroundColorStringrgba(0, 0, 0, 0)預設背景顏色
heightNumbernull圖片高度
widthNumbernull圖片寬度
showLoadingEffectBooleantrue是否顯示載入特效

使用說明

安裝

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>
1.5.0

1 year ago

1.4.0

1 year ago

1.3.0

1 year ago

1.2.0

1 year ago

1.1.0

1 year ago

1.0.0

2 years ago