Question

描述

图片展示组件，类似于 HTML image 标签，但提供了更丰富的功能，使用时需指定样式宽高值。

安装

$ npm install rax-image --save

属性

属性	类型	默认值	必填	描述	支持
source	Object: {uri: String}	-	✔️	设置图片的 uri
style	Object: { width: Number height: Number }	-	✔️	图片样式 width 和 height 为必填属性，否则图片无法正常展示，可以补充其他属性
fallbackSource	Object: {uri: String}	-	✘	备用图片的 uri（当主图加载失败是加载）
resizeMode	String： 'contain' 'cover' 'stretch'	stretch	✘	当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小
mode	String	scaleToFill	✘	小程序中的图片模式，可选项更多
quality	String: 'original' 'normal' 'low' 'high' 'auto'	-	✘	图片质量
placeholder	String	-	✘	占位图的 uri，在图片下载过程中将展示占位图，图片下载完成后将显示source中指定的图片。
onLoad	Function	-	✘	图片加载成功的回调函数
onError	Function	-	✘	图片加载失败的回调函数

注：基础属性、事件及图片含义见组件概述。

resizeMode

• contain：缩放图片以完全装入<Image>区域，可能背景区部分空白。

• cover：缩放图片以完全覆盖<Image>区域，可能图片部分看不见。

• stretch：默认值. 按照<Image>区域的宽高比例缩放图片。

方法

图片加载回调函数

当完成图片加载成功/失败时，将分别触发 onLoad/onError 中的回调函数。

Weex 容器下（iOS/Android）

成员	类型	描述
success	Boolean	标记图片是否成功加载，成功为1/true，失败为0/false
size	Object	加载的图片大小对象
size.naturalWidth	Number	图片宽度，如果图片加载失败则为0/-1
size.naturalHeight	Number	图片高度，如果图片加载失败则为0/-1

Web 容器

Web 下是 Web 原生的 Event 事件。

成员	类型	描述
target	HTML Element	图片自身元素
target.naturalWidth	Number	图片宽度
target.naturalHeight	Number	图片高度

示例

基本用法

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

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

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

设置圆角

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

const App = () => {
 const imageRef = useRef(null);
 return (
   <View style={styles.container}>
	   <Image source={image2} style={{ width: 100, height: 100, borderRadius: 200 }} />
   </View>
 );
};

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

Placeholder

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

const App = () => {
  const imageRef = useRef(null);
  return (
    <View>
      <Image 
        placeholder="//gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg" 
        source={{uri: '//gw.alicdn.com/tfs/TB11oXVXRGE3KVjSZFhXXckaFXa-149-148.png'}} 
        style={{ width: 100, height: 100, borderRadius: 200 }} 
      />
    </View>
  );
};

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

事件

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

const App = () => {
  const imageRef = useRef(null);
  
  function handleLoad() {
    console.log('loaded'); 
  }
  
  function handleError() {
    console.log('error'); 
  }
  
  return (
    <View>
      <Image 
        source={{uri: '//gw.alicdn.com/tfs/TB11oXVXRGE3KVjSZFhXXckaFXa-149-148.png'}} 
        style={{ width: 100, height: 100, borderRadius: 200 }} 
        onLoad={handleLoad}
        onError={handleError}
      />
    </View>
  );
};

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

使用 fallbackSource 和 resizeMode

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

const App = () => {
 return (
   <Image
     source={{
       uri: 'https://gw.alicdn.com/tfs/TB1g6AvPVXXXXa7XpXXXXXXXXXX-215-215.png'
     }}
     fallbackSource={{
       uri: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg'
     }}
     style={{
       width: 100,
       height: 100,
     }}
     resizeMode="cover"
   />
 );
};

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