Img 图片

此组件为uni-app的image组件的加强版，在继承了原有功能外，还特别处理了多平台的兼容性。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
src	String,Array,Object	null	图片地址，可以是jsonArray的数据[{file:'',//...}]	All
width	Number,String	null	图片宽	All
height	Number,String	null	图片高	All
mode	String	null	裁剪模式，新增contain和cover，等同于aspectFit和aspectFill 其他参考uni-app的image组件	All
radius	String,Number,Array	null	圆角，radius=round时为圆形 支持c-radius-开头的圆角类	All
domain	Boolean,String	true	自动补齐域名 注意：“/static/”开头的本地地址不会补全 domain={指定生效平台}，多个“,”分隔，=true时等同于all指全部平台 domain=!{指定生效平台}，只能指定一个非平台 平台名：vue3、vue2、plus、nvue、h5、weixin、alipay、baidu、toutiao、qq、 kuaishou、360、mp、webview、webview-union、webview-huawei	All
baseUrl	String	null	图片地址补全的默认Url	All
remote	Boolean,String	false	是否为本地资源远程托管（通常用于小程序） remote={指定生效平台}，多个“,”分隔，=true时等同于mp，=all时指全部平台 remote=!{指定生效平台}，只能指定一个非平台 平台名：vue3、vue2、plus、nvue、h5、weixin、alipay、baidu、toutiao、qq、 kuaishou、360、mp、webview、webview-union、webview-huawei	All
remoteUrl	String	null	本地资源远程托管所在的Url 为空时，默认使用baseUrl	All
defaultImg	Boolean,Number,String	true	开启默认图片 值为输入defaultUrl的索引，值为true时表示随机一个索引	All
defaultImgUrl	String,Object,Array	null	默认图片地址 object格式：参考工具uriFilter的参数	All
srcKey	String	file	src值为json格式时取值	All
thumb	String	null	缩略图 格式：w/{宽}/h/{高}/q/{0~100}/m/	All
thumbRule	String	aliyun	缩略图生成规则名 目前只支持aliyun（阿里云），其他规则请自行扩展	All
showLoading	Boolean,Object	false	显示加载中图标 object时参考c-load-more组件的props	All
lazyLoad	Boolean	false	参考uni-app的image组件	All
fadeShow	Boolean	true	参考uni-app的image组件	All
webp	Boolean	false	参考uni-app的image组件	All
showMenuByLongpress	Boolean	false	参考uni-app的image组件	All
draggable	Boolean	false	参考uni-app的image组件	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

注意：

图片的宽和高至少指定一个，最好全部指定。

图片组件对资源的处理使用了工具函数uriFilter，对于不使用图片组件但需要对资源链接处理的场景很有用。

事件

事件名	说明
click	点击图片
error	图片加载失败
load	图片加载完成

插槽

插槽名	说明
default	显示在图片后面
loading	图加载中图标插槽
error	图加载失败插槽

示例

<template>
    <c-img src="/static/img/myImg.png" remote mode="cover" />
</template>

扩展缩略图生成规则

// 在main.js中载入cook-uni时配置
Vue.use(cookUni,{
    uriThumbRuleExtra:{
        myThumbRule：function(src,thumb){
            // 返回处理后的地址
            return src
        }
    }
})

// 或使用配置方法进行配置
uni.$c.setConfig('uriThumbRuleExtra',{
    myThumbRule：function(src,thumb){
        // 返回处理后的地址
        return src
    }
})