rax-image - npm Package Compare versions

Comparing version 2.2.3-1 to 2.2.3-2

lib/index.js

@@ -33,4 +33,3 @@ "use strict";
       resizeMode = _a.resizeMode,
-      lazyLoad = _a.lazyLoad,
-      otherProps = __rest(_a, ["source", "fallbackSource", "onLoad", "onError", "style", "resizeMode", "lazyLoad"]);
+      otherProps = __rest(_a, ["source", "fallbackSource", "onLoad", "onError", "style", "resizeMode"]);
 
@@ -55,3 +54,6 @@ source = source || EMPTY_SOURCE;
   nativeProps.onLoad = (0, _rax.useCallback)(function (e) {
-    if (e && e.success) {
+    // onLoad is triggered by native, so no need to judge
+    if (_universalEnv.isMiniApp || _universalEnv.isWeChatMiniProgram) {
+      onLoad && onLoad(e);
+    } else if (e && e.success) {
       // weex
@@ -94,26 +96,11 @@ onLoad && onLoad(e);
     }
-  } // For MiniApp runtime
-
-
-  if (_universalEnv.isMiniApp || _universalEnv.isWeChatMiniProgram || _universalEnv.isByteDanceMicroApp) {
-    nativeProps['lazy-load'] = !!lazyLoad;
-  } // For native lazyLoad support on Web
-  // see: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
-
-
-  if (_universalEnv.isWeb && lazyLoad) {
-    nativeProps['loading'] = 'lazy';
   } // Set default quality to "original" in weex avoid image be optimized unexpect
 
 
-  if (_universalEnv.isWeex) {
-    return (0, _rax.createElement)("image", _extends({
-      quality: "original"
-    }, nativeProps, {
-      ref: ref
-    }));
-  }
-
-  return (0, _rax.createElement)("img", _extends({}, nativeProps, {
+  return _universalEnv.isWeex ? (0, _rax.createElement)("image", _extends({
+    quality: "original"
+  }, nativeProps, {
     ref: ref
+  })) : (0, _rax.createElement)("img", _extends({}, nativeProps, {
+    ref: ref
   }));
@@ -120,0 +107,0 @@ });

lib/types.d.ts

@@ -47,7 +47,2 @@ import { HTMLAttributes, RefAttributes, CSSProperties, SyntheticEvent } from 'rax';
     /**
-     * lazyLoad: enable lazy-load
-     * support: Web/MiniApp
-     */
-    lazyLoad?: boolean;
-    /**
      * callback of success
@@ -54,0 +49,0 @@ */

package.json

 {
   "name": "rax-image",
-  "version": "2.2.3-1",
+  "version": "2.2.3-2",
   "description": "Image component for Rax.",
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

README.md

@@ -5,2 +5,5 @@ # Image
 
+## 支持
+Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序
+
 ## 描述
@@ -24,13 +27,7 @@
 
-注：
-1、**支持**列表中的 <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" />代表 Web <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />代表 weex <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" />代表阿里小程序<img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">代表微信小程序
-<img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px"> 代表头条小程序
-<img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px">代表快应用
-
 | **属性**       | **类型**                                          | **默认值**  | **必填** | **描述**                                                                                | **支持**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | -------------- | ------------------------------------------------- | ----------- | -------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| source         | `object: {uri: string}`                           | -           | true     | 设置图片的 uri                                                                          | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px"><img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px"> |
-| lazyLoad         | `boolean`                           | -           | false     | 是否开启懒加载（注：在Web上需要原生支持`loading="lazy"`）              | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px"> |
+| source         | `object: { width: string, height: string, uri: string}`                           | -           | true     | 设置图片的 uri。height和width为可选项，优先级低于style上的同名属性，一般高于其他CSS中的同名属性。           | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px"><img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px"> |
 | style          | `object: { width: number height: number }`        | -           | true     | 图片样式 width 和 height 为必填属性，否则图片无法正常展示，可以补充其他属性             | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px"><img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px"> |
-| fallbackSource | `object: {uri: string}`                           | -           | false    | 备用图片的 uri（当主图加载失败是加载）                                                  | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />                                                                                                                                                                                                                                                          |
+| fallbackSource | `object: { width: string, height: string, uri: string}`                           | -           | false    | 备用图片的 uri（当主图加载失败时加载）。height和width为可选项，优先级低于style上的同名属性，一般高于其他CSS中的同名属性。 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />                                                                                                                                                                                                                                                          |
 | resizeMode     | `string： 'contain' 'cover' 'stretch'`            | -           | false    | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小                                | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px">                                                                                                                                                                                                                                                          |
@@ -43,3 +40,2 @@ | mode           | String:                                           | scaleToFill | false    | 小程序中的[图片模式](https://docs.alipay.com/mini/component/image)，可选项更多          | <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px">                                                                                                                                                                                                                                            |
 | onError        | `function`                                        | -           | false    | 图片加载失败的回调函数                                                                  | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px"><img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px"> |
-                                                                                                                                                                                                                                                                                            |
 | src    | `string`                                          | -           | false    | 图片下载完成后将显示 src 中指定的图片。 | <img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px">  
@@ -46,0 +42,0 @@

src/types.ts

@@ -54,7 +54,2 @@ import {
   /**
-   * lazyLoad: enable lazy-load
-   * support: Web/MiniApp
-   */
-  lazyLoad?: boolean;
-  /**
    * callback of success
@@ -61,0 +56,0 @@ */

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-75%

Worsened metrics

Total package byte prevSize

52057

decreased by-7.73%

Number of package files

50

decreased by-3.85%

Lines of code

993

decreased by-2.36%

Number of lines in readme file

135

decreased by-2.88%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes