更新记录

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 属性说明：

插槽

无

事件说明：

无

源码，配置属性说明

说明

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

效果图