@arco-design/mobile-react 2.29.5 → 2.30.0

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", {