# <image>

# 简介

<image> 用于在界面中显示单个图片。

# 基本用法

<image style="width:500px;height:500px" src="https://vuejs.org/images/logo.png"></image>

参见示例。

# 子组件

<image>不支持子组件。

# 样式

支持**通用样式**。

# 属性

# placeholder

占位图的 URL，在图片下载过程中将展示占位图，图片下载完成后将显示src中指定的图片。 (示例)

# resize

• contain：缩放图片以完全装入<image>区域，可能背景区部分空白。 (示例)
• cover：缩放图片以完全覆盖<image>区域，可能图片部分看不见。 (示例)
• stretch：默认值. 按照<image>区域的宽高比例缩放图片。(示例)

resize属性和background-size的理念很相似。

# src

要显示图片的 URL，该属性是 <image> 组件的强制属性。

# 支持的图片格式

Weex没有提供必须支持的图片格式列表，主要依赖于你正在使用的图片 adapter 或者 handler。例如，如果你使用 SDWebImage 作为iOS上的图片 handler，你可以使用像 JPEG、PNG、GIF、WebP 等图片格式。

# autoBitmapRecycle

一个布尔标志位控制当图片滚出屏幕时是否回收相关内存。

• true 当图片不可见时回收图片内存
• false 当图片不可见时不回收图片内存，这样做会占用更高的内存，但是会提供更好的用户体验。
• 默认值是true

# 组件方法

#savev0.16.0+

保存图片内容到本地文件或相册，此操作可能需要设备相关权限。

参数:

• callback：{Function} 在图片被写入到本地文件或相册后的回调，回调参数：
  • result：{Object} 回调结果对象，属性列表：
    • success：{Boolean} 标记图片是否已写入完成。
    • errorDesc：{String} 如果图像没有成功写入，该字符串包含了详细的错误描述。

返回值: null

# 使用 save 方法

在 <image>标签上增加 ref 属性 (Vue.js Child Component Refs) ：

<image ref="poster" src="path/to/image.png"></image>

获取组件引用并使用 save 方法:

const $image = this.$refs.poster
$image.save(result => {
  if (result.success) {
    // Do something to hanlde success
  } else {
    console.log(result.errorDesc)
    // Do something to hanlde failure
  }
})

参见 完整例子.

# 事件

• 通用事件. 参见通用事件

#load

当加载完成 src 指定的图片时，load事件将被触发。

事件对象:

• success: {Boolean} 标记图片是否成功加载。

• size: {Object} 加载的图片大小对象，属性列表：

  • naturalWidth: {Number} 图片宽度，如果图片加载失败则为0。
  • naturalHeight: {Number} 图片高度，如果图片加载失败则为0。

# 处理 load 事件

在 <image> 标签上绑定 load 事件：

<image @load="onImageLoad" src="path/to/image.png"></image>

增加事件处理函数：

export default {
  methods: {
    onImageLoad (event) {
      if (event.success) {
        // Do something to hanlde success
      }
    }
  }
}

参见完整示例。

# Vue 示例

• Base64 示例
• Lazy load image 示例

# Rax 示例

rax-image 是 <image> 组件的上层封装，抹平了 Web 和 Weex 的展现

import { createElement, render } from 'rax';
import Driver from "driver-universal";
import Image from 'rax-image';

const App = () => {
 return (
   <Image
     source={{
       uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
     }}
     style={{
       height: '68rpx',
       width: '67rpx'
     }}
  />
 );
};

render(<App />, document.body, { driver: Driver });

rax-image 文档