pb-sxp-ui 1.0.20 → 1.0.21

package/dist/pb-ui.js

@@ -12229,7 +12229,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-17 16:46:54
+     * @LastEditTime: 2024-04-17 18:09:29
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
      *
      */
@@ -12237,28 +12237,26 @@ Made in Italy` })));
         const { src, height, width } = props;
         const [blur, setBlur] = React.useState(false);
         const { sxpParameter } = useSxpDataSource();
-        React.useEffect(() => {
-            if (src === '' || !src)
-                return;
-            const img = new Image();
-            img.src = `${src}?imageMogr2/format/jpg`;
-            img.onload = () => {
-                const aspectRatio = img.height / img.width;
-                const targetAspectRatio = 16 / 9;
-                const tolerance = 0.05; // 允许的宽高比误差范围
-                if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
-                    setBlur(true);
-                }
-            };
-        }, [src]);
+        const onLoad = (img) => {
+            const aspectRatio = img.height / img.width;
+            const targetAspectRatio = 16 / 9;
+            const tolerance = 0.05; // 允许的宽高比误差范围
+            if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
+                setBlur(true);
+            }
+        };
         const getImg = React.useCallback((src, style) => {
             if (src === '' || !src)
                 return;
-            return (src === null || src === void 0 ? void 0 : src.indexOf('.avif')) !== -1 ? (React.createElement("picture", null,
+            return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (React.createElement("picture", null,
                 React.createElement("source", { type: 'image/avif', srcSet: src }),
                 React.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
                 React.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
-                React.createElement("img", { loading: 'lazy', src: src, style: style }))) : (React.createElement("img", { loading: 'lazy', src: src, style: style }));
+                React.createElement("img", { src: src, style: style, onLoad: (e) => {
+                        onLoad(e.target);
+                    } }))) : (React.createElement("img", { src: src, style: style, onLoad: (e) => {
+                    onLoad(e.target);
+                } }));
         }, []);
         return (React.createElement("div", { style: {
                 overflow: 'hidden',
@@ -13058,3 +13056,4 @@ Made in Italy` })));
     Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
+//# sourceMappingURL=pb-ui.js.map