pb-sxp-ui 1.0.20 → 1.0.21

package/dist/index.js

@@ -12214,7 +12214,7 @@ const FingerSwipeTip = ({ imageUrl }) => {
  * @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
  *
  */
@@ -12222,28 +12222,26 @@ const Picture = (props) => {
     const { src, height, width } = props;
     const [blur, setBlur] = useState(false);
     const { sxpParameter } = useSxpDataSource();
-    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 = 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',
@@ -13030,3 +13028,4 @@ function useEditorDataProvider() {
  */
 
 export { EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, SxpPageRender, index$1 as core, Pagebuilder as default, defaultSetting, _materials_ as materials, useEditorDataProvider };
+//# sourceMappingURL=index.js.map