pb-sxp-ui 1.0.19 → 1.0.21

package/dist/index.cjs

@@ -12237,7 +12237,7 @@ const FingerSwipeTip = ({ imageUrl }) => {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-17 15:37:47
+ * @LastEditTime: 2024-04-17 18:09:29
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
  *
  */
@@ -12245,28 +12245,26 @@ const Picture = (props) => {
     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 (React.createElement("picture", null,
-            React.createElement("source", { type: 'image/avif', srcSet: `${src}?imageMogr2/format/avif` }),
+        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", { 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',