更新记录
1.0.8(2025-02-06)
下载此版本
优化
1.0.7(2025-02-06)
下载此版本
添加loading和error状态
1.0.6(2025-02-05)
下载此版本
修改
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.8.11 app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
使用方式
<template>
<view>
<xiaoming-image-cache :src="imageUrl" name='name-1' />
<xiaoming-image-cache :src="imageUrl2" name='name-2' />
</view>
</template>
<script setup>
import { ref } from 'vue';
const imageUrl = ref('https://web-ext-storage.dcloud.net.cn/ask/ad/adv_right_2/DCloud%E5%B9%BF%E5%91%8A%E4%BD%8DBanner-02.jpg');
const imageUrl2 = ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png');
</script>
props
属性 |
默认值 |
说明 |
必填 |
src |
无 |
图片地址 |
是 |
name |
无 |
缓存唯一值 |
推荐 |
loadingClassName |
xiaoming-image-cache-loading |
图片加载中的className |
否 |
errorClassName |
xiaoming-image-cache-error |
图片加载失败的className |
否 |
注意
- h5支持,但是不支持缓存
- name属性可选,但是强烈推荐(必须唯一),可以在图片路径发生变化时候,移除本地图片,避免缓存过大
- 支持uniapp组件image的所有属性
- mode默认为"scaleToFill"
- 推荐一次性赋予有效src,不要替换