2.4.3 • Published 3 years ago

rax-image v2.4.3

Weekly downloads
2,004
License
BSD-3-Clause
Repository
github
Last release
3 years ago

Image

npm

阿里内部同学推荐使用 @ali/rax-picture,对图片尺寸有很多内置的优化策略

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

用于展示图片

安装

$ npm install rax-image --save

引用

import Image from 'rax-image';

属性

属性类型默认值必填描述支持
sourceobject: { width: string, height: string, uri: string}-true设置图片的 uri。height和width为可选项,优先级低于style上的同名属性,一般高于其他CSS中的同名属性。
styleobject: { width: number height: number }-true图片样式 width 和 height 为必填属性,否则图片无法正常展示,可以补充其他属性
fallbackSourceobject: { width: string, height: string, uri: string}-false备用图片的 uri(当主图加载失败时加载)。height和width为可选项,优先级低于style上的同名属性,一般高于其他CSS中的同名属性。
loadingstring: 'eager' 'lazy'eagerfalse客户端如何加载图片,其中 Web 下需要浏览器原生支持loading属性。
resizeModestring: 'contain' 'cover' 'stretch'-false决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小
modeString:scaleToFillfalse小程序中的图片模式,可选项更多
qualitystring: 'original' 'normal' 'low' 'high' 'auto'-false图片质量
placeholderstring-false占位图的 URL,在图片下载过程中将展示占位图, 图片下载完成后将显示 source 中指定的图片。
onClickfunction-false点击图片时的回调函数
onLoadfunction-false图片加载成功的回调函数
onErrorfunction-false图片加载失败的回调函数
srcstring-false图片下载完成后将显示 src 中指定的图片。

onLoad onError 返回

当完成图片加载成功/失败时,将分别触发 onLoad/onError 中的回调函数 function(event) => {}

weex 下(iOS/Android)

成员类型描述
successboolean标记图片是否成功加载,成功为 1/true,失败为 0/false
sizeobject加载的图片大小对象
size.naturalWidthnumber图片宽度,如果图片加载失败则为 0/-1
size.naturalHeightnumber图片高度,如果图片加载失败则为 0/-1

Web 下是 web 原生的 Event 事件

成员类型描述
targetdom图片自身元素
target.naturalWidthnumber图片宽度
target.naturalHeightnumber图片高度

小程序下

成员类型描述
typestring事件类型
detailobject点击位置信息
targetobject点击对象属性信息
currentTargetobject同上

快应用下

成员类型描述
targetobject图片自身元素
target.data.widthnumber图片宽度
target.data.heightnumber图片高度

示例

普通示例

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Image from '../src/index';

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

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

使用 fallbackSource 和 resizeMode

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Image from '../src/index';

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: '100rpx',
        height: '100rpx',
      }}
      resizeMode="cover"
    />
  );
};

render(<App />, document.body, { driver: DriverUniversal });
@everything-registry/sub-chunk-2533tboc-imagetemplate-buytemplate-chattemplate-taobaotemplate-zhihu@bondli/mini-biz-ui@bondli/mini-pos-sdk@bondli/mini-uih5-demo-tpllego-image-text-testace-test-local@halofe/rax-trade-refund@halofe/rax-detail@halofe/rax-item-evaluation@halofe/rax-materials@halofe/rax-materials-test@halofe/rax-member-address@halofe/rax-miniapp-lib@halofe/rax-trade-cart@halofe/rax-trade-cart-test@halofe/rax-trade-order@halofe/astore-mods-miniapp-rax-trade-refund@halofe/astore-mods-miniapp-member-address@halofe/astore-mods-miniapp-rax-carts@halofe/astore-mods-miniapp-rax-detail@halofe/astore-mods-miniapp-rax-item-evaluation@halofe/astore-mods-miniapp-rax-trade-order@aliretail/point-member-sdk@aliretail/point-member-sdk-dev@aliretail/rax-materials-components@aliretail/rax-miniapp-lib@aliretail/deploy@aliretail/officialmod-miniapp-rax-mall_add_on_sku_list@aliretail/officialmod-miniapp-rax-mall_bargain_activity_detail@aliretail/officialmod-miniapp-rax-mall_bargain_activity_entry@aliretail/officialmod-miniapp-rax-mall_category_list@aliretail/officialmod-miniapp-rax-mall_coupon@aliretail/officialmod-miniapp-rax-mall_coupon_bar@aliretail/officialmod-miniapp-rax-mall_cycle_buy@aliretail/officialmod-miniapp-rax-mall_group@aliretail/officialmod-miniapp-rax-mall_group_head@aliretail/officialmod-miniapp-rax-mall_group_old@aliretail/officialmod-miniapp-rax-mall_order_bar@aliretail/officialmod-miniapp-rax-mall_period_shopbag@aliretail/officialmod-miniapp-rax-mall_purchase@aliretail/officialmod-miniapp-rax-mall_recharge@aliretail/officialmod-miniapp-rax-mall_reward_activity_entry@aliretail/officialmod-miniapp-rax-mall_search@aliretail/officialmod-miniapp-rax-mall_search_address@aliretail/officialmod-miniapp-rax-mall_search_result@aliretail/officialmod-miniapp-rax-mall_sku_list@aliretail/officialmod-miniapp-rax-mall_sku_tabs@aliretail/officialmod-miniapp-rax-member-base-bar@aliretail/officialmod-miniapp-rax-member-base_bar@aliretail/officialmod-miniapp-rax-member-ugc@aliretail/officialmod-miniapp-rax-member_base_bar@aliretail/officialmod-miniapp-rax-member_base_info@aliretail/officialmod-miniapp-rax-member_blind_box@aliretail/officialmod-miniapp-rax-member_grow_up@aliretail/officialmod-miniapp-rax-member_rain@aliretail/officialmod-miniapp-rax-member_search@aliretail/officialmod-miniapp-rax-member_share@aliretail/officialmod-miniapp-rax-member_sign@aliretail/officialmod-miniapp-rax-member_text@aliretail/ha-mallmod-miniapp-rax-activity_image@aliretail/ha-mallmod-miniapp-rax-category_list_page@aliretail/ha-mallmod-miniapp-rax-group_buy_entry@aliretail/ha-mallmod-miniapp-rax-ha_navigation_bar@aliretail/ha-mallmod-miniapp-rax-ha_search_bar@aliretail/ha-mallmod-miniapp-rax-ha_swiper@aliretail/ha-mallmod-miniapp-rax-page_settings@aliretail/ha-mallmod-miniapp-rax-search_address@aliretail/mall-trade-sdk@aliretail/mallmod-miniapp-rax-activity_detail_bargain@aliretail/mallmod-miniapp-rax-bargain_activity_entry@aliretail/mallmod-miniapp-rax-coupons@aliretail/mallmod-miniapp-rax-group@aliretail/mallmod-miniapp-rax-popup@aliretail/mallmod-miniapp-rax-reward_activity_entry@aliretail/mallmod-miniapp-rax-video@aliretail/official-wl-dubu-test@aliretail/officialmod-miniapp-rax-add_on_sku_list@aliretail/officialmod-miniapp-rax-common_cube@aliretail/officialmod-miniapp-rax-common_dialog@aliretail/officialmod-miniapp-rax-common_float_entry@aliretail/officialmod-miniapp-rax-common_navigation_bar@aliretail/officialmod-miniapp-rax-common_swiper@aliretail/officialmod-miniapp-rax-common_video@aliretail/officialmod-miniapp-rax-dubu_shop_test@aliretail/officialmod-miniapp-rax-global_page_setting@aliretail/officialmod-miniapp-rax-mall_activity_image@aliretail/officialmod-miniapp-rax-member_ugc@aliretail/officialmod-miniapp-rax-member_ugc_tabs@aliretail/officialmod-miniapp-rax-member_upload@aliretail/officialmod-miniapp-rax-member_vote@aliretail/officialmod-miniapp-rax-p_applet_a@aliretail/officialmod-miniapp-rax-p_applet_rax@aliretail/officialmod-miniapp-rax-platform_applet_01@aliretail/officialmod-miniapp-rax-platfrom_applet_rax_20210610
2.4.3

3 years ago

2.4.2

3 years ago

2.4.1

4 years ago

2.4.1-0

4 years ago

2.4.0

4 years ago

2.3.3-beta.0

4 years ago

2.3.2

4 years ago

2.3.1

4 years ago

2.3.0

4 years ago

2.3.0-0

4 years ago

2.2.6

5 years ago

2.2.5

5 years ago

2.2.5-0

5 years ago

2.2.4

5 years ago

2.2.3

5 years ago

2.2.3-2

5 years ago

2.2.3-1

5 years ago

2.2.2

5 years ago

2.2.2-1

5 years ago

2.2.2-0

5 years ago

2.2.1

5 years ago

2.2.1-beta.0

5 years ago

2.2.0

6 years ago

2.1.1

6 years ago

2.1.1-0

6 years ago

2.1.0

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

1.1.3

6 years ago

1.1.3-beta.3

6 years ago

1.1.3-beta.2

6 years ago

1.1.3-beta.1

6 years ago

1.1.3-0

6 years ago

1.1.2

6 years ago

1.1.2-1

6 years ago

1.1.2-0

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.1.0-beta.1

6 years ago

1.0.4-beta.4

6 years ago

1.0.4-beta.3

6 years ago

1.0.4-beta.2

6 years ago

1.0.4-beta.1

6 years ago

1.0.3

6 years ago

1.0.1-beta.4

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.1-beta.3

6 years ago

1.0.1-beta.2

6 years ago

1.0.1-beta.1

6 years ago

1.0.1-beta.0

6 years ago

1.0.0

7 years ago

1.0.0-beta.1

7 years ago

1.0.0-beta.0

7 years ago

0.6.8

7 years ago

0.6.6-1

7 years ago

0.6.7

7 years ago

0.6.6

7 years ago

0.6.5

7 years ago

0.6.4

7 years ago

0.6.3

7 years ago

0.6.2

7 years ago

0.6.1

7 years ago

0.6.0

8 years ago

0.5.4

8 years ago

0.5.2

8 years ago

0.5.1

8 years ago

0.5.0

8 years ago

0.4.20

8 years ago

0.4.19

8 years ago

0.4.18

8 years ago

0.4.17

8 years ago

0.4.16

8 years ago

0.4.15

8 years ago

0.5.0-beta

8 years ago

0.4.14

8 years ago

0.4.13

8 years ago

0.4.12

8 years ago

0.4.11

8 years ago

0.4.10

8 years ago

0.4.9

8 years ago

0.4.8

8 years ago

0.4.7

8 years ago

0.4.6

8 years ago

0.4.5

8 years ago

0.4.4

8 years ago

0.4.3

8 years ago

0.4.2

8 years ago

0.4.1

8 years ago

0.4.0

8 years ago

0.3.8

8 years ago

0.3.7

8 years ago

0.3.6

8 years ago

0.3.5

8 years ago

0.3.4

8 years ago

0.3.3

8 years ago

0.3.2

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.11

9 years ago

0.2.10

9 years ago

0.2.9

9 years ago

0.2.8

9 years ago

0.2.7

9 years ago

0.2.6

9 years ago

0.2.5

9 years ago

0.2.4

9 years ago

0.2.3

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago