@arco-design/mobile-react 2.29.5 → 2.29.6

package/esm/image/index.d.ts

@@ -60,22 +60,22 @@ export interface ImageProps {
      *  */
     bordered?: boolean;
     /**
-     * 自定义展示加载中内容，staticLabel=false时有效
+     * 自定义展示加载中内容
      * @en Custom display loading content, valid when staticLabel=false
      *  */
     loadingArea?: ReactNode;
     /**
-     * 自定义展示加载失败内容，staticLabel=false时有效
+     * 自定义展示加载失败内容
      * @en Custom display failed to load content, valid when staticLabel=false
      *  */
     errorArea?: ReactNode;
     /**
-     * 是否展示图片加载中提示，staticLabel=false时有效
+     * 是否展示图片加载中提示
      * @en Whether to display the image loading prompt, valid when staticLabel=false
      *  */
     showLoading?: boolean;
     /**
-     * 是否展示图片加载失败提示，staticLabel=false时有效
+     * 是否展示图片加载失败提示
      * @en Whether to display the image loading failure prompt, valid when staticLabel=false
      *  */
     showError?: boolean;
@@ -145,17 +145,17 @@ export interface ImageProps {
      * 图片加载完毕时触发的回调
      * @en Callback when the image is loaded
      * */
-    onLoad?: (e: Event, image: HTMLImageElement) => void;
+    onLoad?: (e: Event | null, image: HTMLImageElement) => void;
     /**
      * 图片加载失败时触发的回调，如果有自动重试则在重试最终失败后触发
      * @en Callback when the image fails to load, triggered after the retry finally fails if there is an automatic retry
      */
-    onError?: (e: string | Event) => void;
+    onError?: (e: string | Event | null) => void;
     /**
      * 图片加载失败时自动重试触发的回调
      * @en Callback triggered by automatic retry when image loading fails
      */
-    onAutoRetry?: (e: string | Event) => void;
+    onAutoRetry?: (e: string | Event | null) => void;
 }
 export interface ImageRef {
     /**

package/esm/image/index.js

@@ -14,30 +14,6 @@ import { useSystem, useWindowSize, getStyleWithVendor, useMountedState } from '.
  * @name_en Image
  */
 export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
-  var system = useSystem();
-
-  var _useWindowSize = useWindowSize(),
-      windowWidth = _useWindowSize.windowWidth,
-      windowHeight = _useWindowSize.windowHeight;
-
-  var _useMountedState = useMountedState('init'),
-      imageStatus = _useMountedState[0],
-      setImageStatus = _useMountedState[1];
-
-  var _useMountedState2 = useMountedState(''),
-      wrapClass = _useMountedState2[0],
-      setWrapClass = _useMountedState2[1];
-
-  var _useMountedState3 = useMountedState(false),
-      staticRetrying = _useMountedState3[0],
-      setStaticRetrying = _useMountedState3[1];
-
-  var imageRef = useRef(null);
-  var imageDomRef = useRef(null);
-  var wrapRef = useRef(null);
-  var retryCountRef = useRef(0);
-  var loadingImageRef = useRef(null);
-  var hasLoadedRef = useRef(false);
   var style = props.style,
       className = props.className,
       status = props.status,
@@ -74,9 +50,33 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
       nativeProps = _props$nativeProps === void 0 ? {} : _props$nativeProps,
       onChange = props.onChange,
       onClick = props.onClick,
-      _onLoad = props.onLoad,
+      onLoad = props.onLoad,
       onError = props.onError,
       onAutoRetry = props.onAutoRetry;
+  var system = useSystem();
+
+  var _useWindowSize = useWindowSize(),
+      windowWidth = _useWindowSize.windowWidth,
+      windowHeight = _useWindowSize.windowHeight;
+
+  var _useMountedState = useMountedState(staticLabel && showLoading ? 'loading' : 'init'),
+      imageStatus = _useMountedState[0],
+      setImageStatus = _useMountedState[1];
+
+  var _useMountedState2 = useMountedState(''),
+      wrapClass = _useMountedState2[0],
+      setWrapClass = _useMountedState2[1];
+
+  var _useMountedState3 = useMountedState(false),
+      staticRetrying = _useMountedState3[0],
+      setStaticRetrying = _useMountedState3[1];
+
+  var imageRef = useRef(null);
+  var imageDomRef = useRef(null);
+  var wrapRef = useRef(null);
+  var retryCountRef = useRef(0);
+  var loadingImageRef = useRef(null);
+  var hasLoadedRef = useRef(false);
   var isPreview = Boolean(fit.indexOf('preview') >= 0);
   var actualBoxWidth = boxWidth || windowWidth;
   var actualBoxHeight = boxHeight || windowHeight;
@@ -112,6 +112,21 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     retryCountRef.current = 0;
     loadImage();
   }, [attrs, width, height, showImage, staticLabel]);
+  useEffect(function () {
+    var _imageDomRef$current;
+
+    // 当使用img标签时，onLoad可能加载完成前已经执行完，此时手动触发一次
+    // @en When using the img tag, onLoad may have been executed before loading is complete, and it needs to be triggered manually
+    if (staticLabel && !hasLoadedRef.current && (_imageDomRef$current = imageDomRef.current) != null && _imageDomRef$current.complete) {
+      // 图片有宽高认为正常加载，否则认为加载错误
+      // @en If the image has width and height, it is considered to be loaded normally, otherwise it is considered to be a loading error
+      if (imageDomRef.current.naturalWidth || imageDomRef.current.naturalHeight) {
+        handleImageLoaded(null, imageDomRef.current);
+      } else {
+        handleStaticImageError(null);
+      }
+    }
+  }, [staticLabel]);
 
   function changeStatus(newStatus) {
     setImageStatus(newStatus);
@@ -132,6 +147,43 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }
 
+  function handleImageLoaded(evt, image) {
+    hasLoadedRef.current = true;
+    changeStatus('loaded');
+    var _image$width = image.width,
+        imageWidth = _image$width === void 0 ? 0 : _image$width,
+        _image$height = image.height,
+        imageHeight = _image$height === void 0 ? 0 : _image$height;
+    var extraClass = '';
+
+    if (isPreview) {
+      var scale = imageWidth / imageHeight;
+      var windowScale = actualBoxWidth / actualBoxHeight;
+
+      if (fit === 'preview-y') {
+        if (scale < windowScale) {
+          image.style.width = actualBoxWidth + "px";
+          image.style.height = actualBoxWidth / scale + "px";
+          extraClass = 'preview-overflow-y';
+        } else {
+          extraClass = 'preview-fit-contain-y';
+        }
+      } else if (fit === 'preview-x') {
+        if (scale > windowScale) {
+          image.style.width = actualBoxHeight * scale + "px";
+          image.style.height = actualBoxHeight + "px";
+          extraClass = 'preview-overflow-x';
+        } else {
+          extraClass = 'preview-fit-contain-x';
+        }
+      }
+    }
+
+    extraClass && image.classList.add(extraClass);
+    setWrapClass(extraClass ? extraClass + "-container" : '');
+    onLoad && onLoad(evt, image);
+  }
+
   function loadImage(isFromRetry) {
     // 如果在加载图片前发现上一个图片还没加载完，则抛弃上一个图片的加载
     // @en Abort last image before starting loading new image
@@ -157,41 +209,8 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     image.onload = function (evt) {
       loadingImageRef.current = null;
       imageDomRef.current = image;
-      hasLoadedRef.current = true;
-      changeStatus('loaded');
-      var _image$width = image.width,
-          imageWidth = _image$width === void 0 ? 0 : _image$width,
-          _image$height = image.height,
-          imageHeight = _image$height === void 0 ? 0 : _image$height;
-      var extraClass = '';
-
-      if (isPreview) {
-        var scale = imageWidth / imageHeight;
-        var windowScale = actualBoxWidth / actualBoxHeight;
-
-        if (fit === 'preview-y') {
-          if (scale < windowScale) {
-            image.style.width = actualBoxWidth + "px";
-            image.style.height = actualBoxWidth / scale + "px";
-            extraClass = 'preview-overflow-y';
-          } else {
-            extraClass = 'preview-fit-contain-y';
-          }
-        } else if (fit === 'preview-x') {
-          if (scale > windowScale) {
-            image.style.width = actualBoxHeight * scale + "px";
-            image.style.height = actualBoxHeight + "px";
-            extraClass = 'preview-overflow-x';
-          } else {
-            extraClass = 'preview-fit-contain-x';
-          }
-        }
-      }
-
-      extraClass && image.classList.add(extraClass);
-      setWrapClass(extraClass ? extraClass + "-container" : '');
+      handleImageLoaded(evt, image);
       replaceChild(image);
-      _onLoad && _onLoad(evt, image);
     };
 
     image.onerror = function (evt) {
@@ -217,9 +236,10 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   function handleStaticImageError(e) {
-    var evt = e.nativeEvent;
+    var evt = e ? e.nativeEvent : null;
 
     if (retryCountRef.current >= retryTime) {
+      changeStatus('error');
       onError && onError(evt);
     } else {
       retryCountRef.current += 1;
@@ -284,7 +304,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     }, staticLabel && showImage && !staticRetrying ? /*#__PURE__*/React.createElement("img", _extends({}, nativeProps, attrs, {
       ref: imageDomRef,
       onLoad: function onLoad(e) {
-        return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
+        return handleImageLoaded(e.nativeEvent, imageDomRef.current);
       },
       onError: handleStaticImageError
     })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/React.createElement("div", {

package/esm/image-preview/index.js

@@ -814,7 +814,9 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       return renderIndicator(currentIndex, total, lastIndex);
     }
 
-    return openLoaded ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    return openLoaded ? /*#__PURE__*/React.createElement(Portal, {
+      getContainer: getContainer
+    }, /*#__PURE__*/React.createElement("div", {
       className: "image-preview-indicator"
     }, currentIndex + 1, "/", total)) : null;
   } // ios在重设style时图片会消失一下造成闪动，因此在底下垫一张图
@@ -852,7 +854,9 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
   function renderLoadingArea(index) {
     // loadingArea提出来，放到过渡图上层
     // @en The loadingArea is extracted and placed on the upper layer of the transition image
-    return index === openIndex ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    return index === openIndex ? /*#__PURE__*/React.createElement(Portal, {
+      getContainer: getContainer
+    }, /*#__PURE__*/React.createElement("div", {
       className: "image-preview-loading-area"
     }, loadingArea || /*#__PURE__*/React.createElement(Loading, {
       type: "circle",

package/esm/image-preview/methods.d.ts

@@ -5,6 +5,7 @@ export interface OpenBaseProps {
     close: (e: any) => void;
     openIndex: number;
     images: any[];
+    getContainer?: () => HTMLElement;
 }
 export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "close">>, context?: GlobalContextParams | undefined) => {
     close: () => void;

package/esm/image-preview/methods.js

@@ -7,9 +7,7 @@ export function open(Component) {
       unmountOnExit: true
     }, config || {}, {
       close: function close() {}
-    });
-
-    var dynamicProps = _extends({}, baseProps); // 不同的key用不同的容器挂载
+    }); // 不同的key用不同的容器挂载
     // @en Different keys are mounted in different containers
 
 
@@ -23,6 +21,12 @@ export function open(Component) {
     var _ReactDOMRender = new ReactDOMRender(Component, div, context),
         render = _ReactDOMRender.render;
 
+    var dynamicProps = _extends({}, baseProps, {
+      getContainer: function getContainer() {
+        return div;
+      }
+    });
+
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, newConfig || {});
       render(dynamicProps);

package/esm/masking/methods.js

@@ -14,9 +14,7 @@ export function getOpenMethod(Component, containerId, normalize) {
     }, normalize(config), {
       visible: false,
       close: function close() {}
-    });
-
-    var dynamicProps = _extends({}, baseProps); // 不同的key用不同的容器挂载
+    }); // 不同的key用不同的容器挂载
 
 
     var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
@@ -29,6 +27,12 @@ export function getOpenMethod(Component, containerId, normalize) {
     var _ReactDOMRender = new ReactDOMRender(Component, div, context),
         render = _ReactDOMRender.render;
 
+    var dynamicProps = _extends({}, baseProps, {
+      getContainer: function getContainer() {
+        return div;
+      }
+    });
+
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, normalize(newConfig));
       render(dynamicProps);

package/esm/popup-swiper/index.d.ts

@@ -63,10 +63,7 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
             key?: string | undefined;
-        }) => void; /**
-         * 内容面板 touchstart 事件，返回true时表示阻止本组件内部处理事件
-         * @en The touchstart callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
-         */
+        }) => void;
     };
 };
 declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>> & {
@@ -82,10 +79,7 @@ declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React
         close: () => void;
         update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
             key?: string | undefined;
-        }) => void; /**
-         * 内容面板 touchstart 事件，返回true时表示阻止本组件内部处理事件
-         * @en The touchstart callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
-         */
+        }) => void;
     };
 };
 /**

package/esm/tabs/index.js

@@ -229,7 +229,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     // 利用受控手动更改index时，给cell line加上动画
     // @en Animate the cell line when changeing the index
     setCellTrans(true);
-    changeFromRef.current = 'manual';
+
+    if (!changeFromRef.current) {
+      changeFromRef.current = 'manual';
+    }
   }, [activeTab]);
   useUpdateEffect(function () {
     onDistanceChange && onDistanceChange(distance, wrapWidth, activeIndex);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.29.5",
+    "version": "2.29.6",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.16.8",
+        "@arco-design/mobile-utils": "2.16.9",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "eca19563a4f83ce7acecb0a4e8e11e4ee258189e"
+    "gitHead": "0ac7a2b2a9f339e75d0b81d6af6dcf0f55ffad45"
 }

package/umd/image/index.d.ts

@@ -60,22 +60,22 @@ export interface ImageProps {
      *  */
     bordered?: boolean;
     /**
-     * 自定义展示加载中内容，staticLabel=false时有效
+     * 自定义展示加载中内容
      * @en Custom display loading content, valid when staticLabel=false
      *  */
     loadingArea?: ReactNode;
     /**
-     * 自定义展示加载失败内容，staticLabel=false时有效
+     * 自定义展示加载失败内容
      * @en Custom display failed to load content, valid when staticLabel=false
      *  */
     errorArea?: ReactNode;
     /**
-     * 是否展示图片加载中提示，staticLabel=false时有效
+     * 是否展示图片加载中提示
      * @en Whether to display the image loading prompt, valid when staticLabel=false
      *  */
     showLoading?: boolean;
     /**
-     * 是否展示图片加载失败提示，staticLabel=false时有效
+     * 是否展示图片加载失败提示
      * @en Whether to display the image loading failure prompt, valid when staticLabel=false
      *  */
     showError?: boolean;
@@ -145,17 +145,17 @@ export interface ImageProps {
      * 图片加载完毕时触发的回调
      * @en Callback when the image is loaded
      * */
-    onLoad?: (e: Event, image: HTMLImageElement) => void;
+    onLoad?: (e: Event | null, image: HTMLImageElement) => void;
     /**
      * 图片加载失败时触发的回调，如果有自动重试则在重试最终失败后触发
      * @en Callback when the image fails to load, triggered after the retry finally fails if there is an automatic retry
      */
-    onError?: (e: string | Event) => void;
+    onError?: (e: string | Event | null) => void;
     /**
      * 图片加载失败时自动重试触发的回调
      * @en Callback triggered by automatic retry when image loading fails
      */
-    onAutoRetry?: (e: string | Event) => void;
+    onAutoRetry?: (e: string | Event | null) => void;
 }
 export interface ImageRef {
     /**

package/umd/image/index.js

@@ -34,30 +34,6 @@
    * @name_en Image
    */
   var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-    var system = (0, _helpers.useSystem)();
-
-    var _useWindowSize = (0, _helpers.useWindowSize)(),
-        windowWidth = _useWindowSize.windowWidth,
-        windowHeight = _useWindowSize.windowHeight;
-
-    var _useMountedState = (0, _helpers.useMountedState)('init'),
-        imageStatus = _useMountedState[0],
-        setImageStatus = _useMountedState[1];
-
-    var _useMountedState2 = (0, _helpers.useMountedState)(''),
-        wrapClass = _useMountedState2[0],
-        setWrapClass = _useMountedState2[1];
-
-    var _useMountedState3 = (0, _helpers.useMountedState)(false),
-        staticRetrying = _useMountedState3[0],
-        setStaticRetrying = _useMountedState3[1];
-
-    var imageRef = (0, _react.useRef)(null);
-    var imageDomRef = (0, _react.useRef)(null);
-    var wrapRef = (0, _react.useRef)(null);
-    var retryCountRef = (0, _react.useRef)(0);
-    var loadingImageRef = (0, _react.useRef)(null);
-    var hasLoadedRef = (0, _react.useRef)(false);
     var style = props.style,
         className = props.className,
         status = props.status,
@@ -94,9 +70,33 @@
         nativeProps = _props$nativeProps === void 0 ? {} : _props$nativeProps,
         onChange = props.onChange,
         onClick = props.onClick,
-        _onLoad = props.onLoad,
+        onLoad = props.onLoad,
         onError = props.onError,
         onAutoRetry = props.onAutoRetry;
+    var system = (0, _helpers.useSystem)();
+
+    var _useWindowSize = (0, _helpers.useWindowSize)(),
+        windowWidth = _useWindowSize.windowWidth,
+        windowHeight = _useWindowSize.windowHeight;
+
+    var _useMountedState = (0, _helpers.useMountedState)(staticLabel && showLoading ? 'loading' : 'init'),
+        imageStatus = _useMountedState[0],
+        setImageStatus = _useMountedState[1];
+
+    var _useMountedState2 = (0, _helpers.useMountedState)(''),
+        wrapClass = _useMountedState2[0],
+        setWrapClass = _useMountedState2[1];
+
+    var _useMountedState3 = (0, _helpers.useMountedState)(false),
+        staticRetrying = _useMountedState3[0],
+        setStaticRetrying = _useMountedState3[1];
+
+    var imageRef = (0, _react.useRef)(null);
+    var imageDomRef = (0, _react.useRef)(null);
+    var wrapRef = (0, _react.useRef)(null);
+    var retryCountRef = (0, _react.useRef)(0);
+    var loadingImageRef = (0, _react.useRef)(null);
+    var hasLoadedRef = (0, _react.useRef)(false);
     var isPreview = Boolean(fit.indexOf('preview') >= 0);
     var actualBoxWidth = boxWidth || windowWidth;
     var actualBoxHeight = boxHeight || windowHeight;
@@ -132,6 +132,21 @@
       retryCountRef.current = 0;
       loadImage();
     }, [attrs, width, height, showImage, staticLabel]);
+    (0, _react.useEffect)(function () {
+      var _imageDomRef$current;
+
+      // 当使用img标签时，onLoad可能加载完成前已经执行完，此时手动触发一次
+      // @en When using the img tag, onLoad may have been executed before loading is complete, and it needs to be triggered manually
+      if (staticLabel && !hasLoadedRef.current && (_imageDomRef$current = imageDomRef.current) != null && _imageDomRef$current.complete) {
+        // 图片有宽高认为正常加载，否则认为加载错误
+        // @en If the image has width and height, it is considered to be loaded normally, otherwise it is considered to be a loading error
+        if (imageDomRef.current.naturalWidth || imageDomRef.current.naturalHeight) {
+          handleImageLoaded(null, imageDomRef.current);
+        } else {
+          handleStaticImageError(null);
+        }
+      }
+    }, [staticLabel]);
 
     function changeStatus(newStatus) {
       setImageStatus(newStatus);
@@ -152,6 +167,43 @@
       }
     }
 
+    function handleImageLoaded(evt, image) {
+      hasLoadedRef.current = true;
+      changeStatus('loaded');
+      var _image$width = image.width,
+          imageWidth = _image$width === void 0 ? 0 : _image$width,
+          _image$height = image.height,
+          imageHeight = _image$height === void 0 ? 0 : _image$height;
+      var extraClass = '';
+
+      if (isPreview) {
+        var scale = imageWidth / imageHeight;
+        var windowScale = actualBoxWidth / actualBoxHeight;
+
+        if (fit === 'preview-y') {
+          if (scale < windowScale) {
+            image.style.width = actualBoxWidth + "px";
+            image.style.height = actualBoxWidth / scale + "px";
+            extraClass = 'preview-overflow-y';
+          } else {
+            extraClass = 'preview-fit-contain-y';
+          }
+        } else if (fit === 'preview-x') {
+          if (scale > windowScale) {
+            image.style.width = actualBoxHeight * scale + "px";
+            image.style.height = actualBoxHeight + "px";
+            extraClass = 'preview-overflow-x';
+          } else {
+            extraClass = 'preview-fit-contain-x';
+          }
+        }
+      }
+
+      extraClass && image.classList.add(extraClass);
+      setWrapClass(extraClass ? extraClass + "-container" : '');
+      onLoad && onLoad(evt, image);
+    }
+
     function loadImage(isFromRetry) {
       // 如果在加载图片前发现上一个图片还没加载完，则抛弃上一个图片的加载
       // @en Abort last image before starting loading new image
@@ -177,41 +229,8 @@
       image.onload = function (evt) {
         loadingImageRef.current = null;
         imageDomRef.current = image;
-        hasLoadedRef.current = true;
-        changeStatus('loaded');
-        var _image$width = image.width,
-            imageWidth = _image$width === void 0 ? 0 : _image$width,
-            _image$height = image.height,
-            imageHeight = _image$height === void 0 ? 0 : _image$height;
-        var extraClass = '';
-
-        if (isPreview) {
-          var scale = imageWidth / imageHeight;
-          var windowScale = actualBoxWidth / actualBoxHeight;
-
-          if (fit === 'preview-y') {
-            if (scale < windowScale) {
-              image.style.width = actualBoxWidth + "px";
-              image.style.height = actualBoxWidth / scale + "px";
-              extraClass = 'preview-overflow-y';
-            } else {
-              extraClass = 'preview-fit-contain-y';
-            }
-          } else if (fit === 'preview-x') {
-            if (scale > windowScale) {
-              image.style.width = actualBoxHeight * scale + "px";
-              image.style.height = actualBoxHeight + "px";
-              extraClass = 'preview-overflow-x';
-            } else {
-              extraClass = 'preview-fit-contain-x';
-            }
-          }
-        }
-
-        extraClass && image.classList.add(extraClass);
-        setWrapClass(extraClass ? extraClass + "-container" : '');
+        handleImageLoaded(evt, image);
         replaceChild(image);
-        _onLoad && _onLoad(evt, image);
       };
 
       image.onerror = function (evt) {
@@ -237,9 +256,10 @@
     }
 
     function handleStaticImageError(e) {
-      var evt = e.nativeEvent;
+      var evt = e ? e.nativeEvent : null;
 
       if (retryCountRef.current >= retryTime) {
+        changeStatus('error');
         onError && onError(evt);
       } else {
         retryCountRef.current += 1;
@@ -304,7 +324,7 @@
       }, staticLabel && showImage && !staticRetrying ? /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, nativeProps, attrs, {
         ref: imageDomRef,
         onLoad: function onLoad(e) {
-          return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
+          return handleImageLoaded(e.nativeEvent, imageDomRef.current);
         },
         onError: handleStaticImageError
       })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/_react.default.createElement("div", {

package/umd/image-preview/index.js

@@ -843,7 +843,9 @@
         return renderIndicator(currentIndex, total, lastIndex);
       }
 
-      return openLoaded ? /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement("div", {
+      return openLoaded ? /*#__PURE__*/_react.default.createElement(_portal.default, {
+        getContainer: getContainer
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: "image-preview-indicator"
       }, currentIndex + 1, "/", total)) : null;
     } // ios在重设style时图片会消失一下造成闪动，因此在底下垫一张图
@@ -881,7 +883,9 @@
     function renderLoadingArea(index) {
       // loadingArea提出来，放到过渡图上层
       // @en The loadingArea is extracted and placed on the upper layer of the transition image
-      return index === openIndex ? /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement("div", {
+      return index === openIndex ? /*#__PURE__*/_react.default.createElement(_portal.default, {
+        getContainer: getContainer
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: "image-preview-loading-area"
       }, loadingArea || /*#__PURE__*/_react.default.createElement(_loading.default, {
         type: "circle",

package/umd/image-preview/methods.d.ts

@@ -5,6 +5,7 @@ export interface OpenBaseProps {
     close: (e: any) => void;
     openIndex: number;
     images: any[];
+    getContainer?: () => HTMLElement;
 }
 export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "close">>, context?: GlobalContextParams | undefined) => {
     close: () => void;