更新记录

1.1.0(2021-01-21)

修复mode设置不生效问题

1.0.0(2021-01-21)

首次发布


平台兼容性

属性说明

属性名 类型 默认值 说明
src
mode
lazy-load
fade-show
webp
show-menu-by-longpress
@error
@load

以上属性与官方Image一致,请参考 官方文档

属性名 类型 默认值 说明
loading-error-img String ./loading_error.png 可选: 加载失败图片:可以本地url、网络url、base64 (与src一致)
loading-ing-img String oblique-light 可选: 加载中的样式或图片

two-balls = 两个球来回转
oblique-light = 斜光
looming = 若影若现
本地url、网络url、base64 = 自定义的加载中图片(与src一致)
complete-transition Boolean true 可选:是否需要显示加载完成动画

以上为增强属性,为本组件的增加功能

使用示例

总的使用原则就是,官方的Image组件的属性都可以使用,还可以使用增强属性,占位、失败、加载完成动画的显示

图片大小就直接 class 设置就行了,和官方的Image组件一样

<template>
    <view class="list">
        <fr-image class="img" src="../../static/a.png" mode=""/>
        <fr-image class="img" src="https://tva1.sinaimg.cn/xxx.png" mode="" loading-ing-img="two-balls"/>
        <fr-image class="img" src="../a.png" mode="" loading-ing-img="../static/a.png"/>
        <fr-image class="img" src="../static/a.png" mode="" loading-ing-img="../static/a.png"/>
    </view>
</template>

<script>
import FrImage from '@/components/fr-image/fr-image.vue'
</script>

加入交流群

扫码加我微信加入微信交流群(请备注:图片Uni插件)

图片名称
🤗 🤗 🤗 如果对您有帮助,请右上角点赞,五星好评

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问