Appearance

目录

Image ​

图片组件。

样式 ​

除支持 通用布局样式 和 通用视图样式 以外，还支持以下样式：

属性名类型默认值说明示例
resizestring'origin'图片拉伸模式resize: 'origin' // 原始图片居中显示（默认）
resize: 'contain' // 缩放图片使其完全装入Image组件，可能背景区部分区域空白
resize: 'cover' // 缩放图片使其完全填充Image组件，可能图片部分区域被裁掉
resize: 'stretch' // 按照Image组件的宽高缩放图片

属性 ​

除支持 通用视图属性 以外，还支持以下属性：

属性名类型默认值说明示例
srcstring普通图片this.src = "test"; // Native资源图片
this.src = '/sdcard/test.png'; // 绝对路径图片（手机设备路径）
this.src = require('../res/test.png'); // 相对路径图片（工程目录）
this.src = './images/test.png'; // 相对路径图片（编译产物目录）
this.src = 'http://xxx/test.jpg'; // 网络图片
this.src = '//xxx/test.jpg'; // 网络图片简写（默认加https:）
this.src = 'data:application/json;charset=utf-8;base64,iVBO...'; // base64图片
gifSrcstringGif图片this.gifSrc = "test"; // Native资源图片
this.gifSrc = '/sdcard/test.gif'; // 绝对路径图片（手机设备路径）
this.gifSrc = require('../res/test.gif'); // 相对路径图片（工程目录）
this.src = './images/test.gif'; // 相对路径图片（编译产物目录）
this.gifSrc = 'http://xxx/test.gif'; // 网络图片
this.gifSrc = '//xxx/test.gif'; // 网络图片简写（默认加https:）
gifRepeatCountnumber0 (无限循环)Gif播放次数this.gifRepeatCount = 2

INFO

  • 必需先设置gifRepeatCount，再设置gifSrc，gifRepeatCount播放次数才会起作用。

  • 相对路径图片也可以通过import方式来加载图片：

    js
    import imgPath from '../img/test.jpg'
this.src = imgPath

  • 要使相对路径图片能正常显示，必需在原生侧执行当前页面的JS代码时，传入第二个参数，即JS文件绝对路径，如：hmRender.render(jsContent, "file:///data/data/xxx/xxx.js");。

方法 ​

js
/**
 * 加载图片（支持加载回调）
 * @param src 图片源，可以直接是一个路径（简写），也可以是一个配置对象
 * 
 * ImageStyle = {
 *     src: string  // 图片路径
 *     placeholder: string  // 占位图片
 *     failedImage: string  // 失败图片
 *     gifSrc: string  // Gif图路径
 *     gifRepeatCount: number  // Gif图重复次数
 * }
 */
load(src: string|ImageStyle, (type: number, isSuccess: boolean) => void);

示例 ​

js
let imageView = new Image();
imageView.style = {
    width: 80,
    height: 80,
    resize: 'cover',
};
imageView.src = 'http://xxx/test.jpg';
imageView.gifSrc = 'http://xxx/test.gif';

imageView.load('http://xxx/test.jpg', (srcType, isSuccess) => {});

imageView.load({
    src: 'http://xxx/test.jpg',
    placeholder: 'http://xxx/holder.jpg',
    failedImage: 'http://xxx/failed.jpg'
}, (srcType, isSuccess) => {});