更新记录

1.0.3(2020-03-23) 下载此版本

1.修改已知的问题

1.0.2(2020-03-19) 下载此版本

1.添加缓存机制, 2.支持图片加载出错,替补显示图片 3.支持图片加载因网路问题出错,短时间内重新尝试加载

1.0.1(2019-08-09) 下载此版本

修改 在手机端 Vue脚本中 Image对象错误提示:“javascript Unhandled promise rejection, ReferenceError: Can't find variable: Image”, 改用官方提供的Image组件中的error方法进行处理

查看更多

平台兼容性

使用方式

在 script 中引用组件 代码块: orgImage

import orgImage from '../../components/org-image/org-image';

export default {
    components: {orgImage}
}

在 template 中使用组件

<template>
    <view>
        <view style="display: flex;justify-content: center;flex-wrap: wrap;">
            默认图片选择临时存储,存储在应用内

            <view class="item" style="height: 80rpx;">
                1.头像
                <org-image src="https://timgsa.baidu.com/" :size="{width:'80rpx',height:'80rpx'}" :is-circle="true"></org-image>
            </view>
            <view class="line"></view>

            <view class="item" style="width: 100vw;text-align: center;">
                2.使用网路地址(正常显示)
                <org-image :src="src" :size="{width:'500rpx',height:'500rpx'}" :is-circle="false"></org-image>
            </view>
            <view class="line"></view>
            <view class="item" style="width: 500rpx;">
                3.图片出错,使用默认图片(图片会占据对应的位置,保持设置的大小,并居中)
                <org-image src="https://timgsa.baidu.com/" :size="{width:'500rpx',height:'500rpx'}" :is-circle="false" :css="{'background':'#dedede'}"></org-image>
            </view>
            <view class="line"></view>
            <view class="item" style="width: 500rpx;">
                4.设置图片存储为永久存储
                <org-image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584594805820&di=1eb66418d4ab3b7cf696fa9ecc82a81f&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D583874135%2C70653437%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D3607%26h%3D2408"
                 :size="{width:'500rpx',height:'500rpx'}" :is-circle="false" :cache-type="-1"></org-image>
            </view>
            <view class="line"></view>
            <view class="item" style="width: 100vw;padding: 20rpx;">
                <view @tap="getTemp">
                    获取缓存的信息
                    <view v-for="(it,key ,index) in temporaryList" :key="index">
                        {{key}}:{{it}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

属性说明 (源码中部分属性说明不够清楚,请以下面说明为准

orgInputText 属性说明:

属性名 类型 默认值 说明
src String - 图片路径
size Object - 图片宽度和高度
mode String - 图片显示方式,具体以官方imagemode为参考
fade-show Boolean - 具体以官方imagefade-show为参考
cache-type Number 0' 缓存方式,0缓存到应用内,-1永久缓存
is-preview Boolean false 是否可以单击预览图片
is-circle Boolean true 是否圆角,会对图片进行边角切割
css Object - 组件样式

插槽

事件说明:

源码,配置属性说明

文件 变量 说明
config.js redImgPath http://192.168.0.103:8080/ 图片服务器请求路径,请以实际路径为准
config.js defautlErrorImage /static/defautl-error.png 当图片加载失败时,默认显示图片
org-image.vue saveFile _doc/ App端缓存文件存储路径,当前不支持修改
org-image.vue errorSplitTime 200 图片加载失败,再次尝试间隔时间 (毫秒)

说明

  • 1.修改图片服务器请求路径
  • 2.系统静态资源必须放置到的 /static/目录下,且路径最好为绝对路径
  • 3.永久缓存当前支持app,H5端会自动存为app内缓存,在app生命周期内有效。
  • 4.根据实际操作,最终将组建的宽度和高度设置为100%,因此需要对组建的父级元素进行宽高设置(这样操作的好处是,图片加载失败,仍然会占据想要的宽度位置)。

效果图

预览图

隐私、权限声明

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

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

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

许可协议

MIT协议

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