更新记录

1.0.3（2024-04-19）

*修复 字体文件加载失败

1.0.2（2024-04-15）

更新文档

1.0.1（2024-04-15）

添加 Props styles 属性（设置组件样式）

平台兼容性

xb-image

特性

1. 图片缓冲加载
2. 加载失败处理
3. 加载占位后自动展开策略
4. 支持原uniapp image 标签所有参数
5. 友好交互

全局配置

slot 插槽

方法

开始使用

<template>
    <xb-image src="src" width="200px" height="200px">
        </xb-image>
</template>

建议宽高设置在便签属性中，因为微信小程序原因直接定义class在style中设置无效，如不使用微信小程序可不在便签属性中定义。

widthFix 与 heightFix 用法

<template>
        <!-- widthFix -->
    <xb-image src="src" mode="widthFix" width="200px" height="20px">
        </xb-image>
        <!-- heightFix -->
    <xb-image src="src" mode="heightFix" width="20px" height="200px">
        </xb-image>
</template>

widthFix 宽度固定高度自适应

默认开启 transition 过渡动画，此时组件设置的 height 为初始占位高度，不设置 height 默认 20px 初始高度，图片加载完成后会自动过渡到正确高度，如果不希望过渡将 transition 设置为 false 即可

heightFix 高度固定宽度自适应

默认开启 transition 过渡动画，此时组件设置的 width 为初始占位宽度，不设置 width 默认 20px 初始宽度，图片加载完成后会自动过渡到正确宽度，如果不希望过渡将 transition 设置为 false 即可

slot 插槽及重新加载使用

<template>
        <xb-image src="src" width="200px" height="200px" ref="xbImageRef" @error="error">
      <!--loading 自定义加载样式-->
      <template #loading>图片加载中...</template>
            <!--error 自定义加载失败样式-->
      <template #error>图片失败了</template>
        </xb-image>
</template>
<script setup>
  improt {ref} from 'vue'
    const xbImageRef = ref();
  // 加载失败时执行重新加载
  const error = (e)=>{
    xbImageRef.value.reload();
  }
</script>