@cloudbase/weda-ui 0.2.5 → 0.2.8

package/src/web/components/form/uploader/uploader.h5.jsx

@@ -0,0 +1,237 @@
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+import weui from '../../../utils/weui';
+import classNames from '../../../utils/classnames';
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { useSyncValue } from '../../../utils/useSyncValue';
+import { isCloudFileID } from '../../../utils/platform';
+import { IMAGE_TYPES } from './uploader.pc';
+
+const uploadPath = 'weda-uploader';
+/**
+ * H5端
+ */
+export function ImageUploaderH5({
+  title,
+  maxUploadCount,
+  maxSize = 10,
+  acceptTypes,
+  className,
+  id,
+  events,
+  layout,
+  defaultValue,
+  single = false,
+  onChange,
+  style,
+}) {
+  const cls = classNames({
+    'weda-ui': true,
+    'weui-cells': true,
+    'weui-cells_form': true,
+    [className]: className,
+  });
+
+  // 上传中
+  const [uploading, setUploading] = React.useState(false);
+  //上传进度
+  const [progress, setProgress] = React.useState(0);
+  const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+  const fileIdList = React.useMemo(() => {
+    if( typeof inputValue  === 'string') {
+      // single = true 传入的是字符串
+      return [inputValue].filter(i => i.length > 0); // 排除空串
+    }
+    if(Array.isArray(inputValue)) {
+      return inputValue;
+    }
+    return [];
+  }, [inputValue]);
+
+  const finalMaxImgCount = React.useMemo(() => {
+    if(single) return 1;
+    return maxUploadCount;
+  }, [single, maxUploadCount]);
+  
+  const deleteFile = (url) => {
+    if(single) {
+      setInputValue('');
+      return;
+    }
+    setInputValue((list) => list.filter(f => f !== url));
+  };
+  React.useEffect(() => {
+    if (single) {
+      const file = fileIdList[0] || '';
+      file && onChange && onChange(file);
+      events.change && events.change({ value: file });
+    } else {
+      onChange && onChange(fileIdList);
+      events.change && events.change({ value: fileIdList });
+    }
+  }, [fileIdList]);
+  const onProgress = (progressEvent) => {
+    let percentCompleted = 0;
+    try {
+      percentCompleted = Math.round(
+        (progressEvent.loaded * 100) / progressEvent.total
+      );
+      percentCompleted < 100 ? percentCompleted : 100;
+    } catch (e) {}
+    setProgress(percentCompleted);
+  };
+  const uploadToTcb = (file) => {
+    setUploading(true);
+    getCloudInstance().then(async (tcb) => {
+      try {
+        const fileType = file.type.split('/')?.[1];
+        const cloudPath = `${uploadPath}/uploader-${Date.now()}.${fileType}`;
+        const { fileID } = await tcb.uploadFile({
+          cloudPath,
+          filePath: file,
+          onUploadProgress: onProgress,
+          
+        });
+        fileID && setInputValue((list) => [...list, fileID]);
+        fileID && events.success && events.success({ value: fileID, file });
+      } catch (err) {
+        events.error && events.error(err);
+      } finally {
+        setUploading(false);
+        setProgress(0);
+      }
+    });
+  };
+
+  const accepts = React.useMemo(() => {
+    return acceptTypes.includes('image/*') || acceptTypes.length === 0
+      ? IMAGE_TYPES
+      : Array.from(new Set(acceptTypes));
+  }, [acceptTypes]);
+
+  return (
+    <div className={cls} id={id} style={style}>
+      <div className="weui-cell">
+        <div className="weui-cell__bd">
+          <div className={classNames("weui-uploader", layout)}>
+            <div className={classNames("weui-uploader__hd", layout)}>
+              <p className="weui-uploader__title">{title}</p>
+              <div className="weui-uploader__info">
+                <span id="uploadCount">{fileIdList.length}</span>
+                {`/${finalMaxImgCount}`}
+              </div>
+            </div>
+            <div className="weui-uploader__bd">
+              <ul className="weui-uploader__files" id="uploaderFiles">
+                {(fileIdList ?? []).map(f => <SingleImage  key={f} src={f} deleteBySrc={deleteFile} />)}
+                {uploading && 
+                <li className="weui-uploader__file weui-uploader__file_status" >
+                <div className="weui-uploader__file-content">
+                  {progress}%
+                </div>
+              </li>}
+              </ul>
+              {(fileIdList.length < maxUploadCount ||
+                (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
+                  <div className="weui-uploader__input-box">
+                  <input
+                    id="uploaderInput"
+                    className="weui-uploader__input"
+                    type="file"
+                    accept={accepts.join(',')}
+                    multiple
+                    onChange={e => {
+                      const files = [...e.target.files];
+                      if (files.some(f => f.size > maxSize * 1024 * 1024)) {
+                        weui.alert('请上传不超过10M的图片');
+                        return false;
+                      }
+              
+                      if (files.length > finalMaxImgCount) {
+                        // 防止一下子选择过多文件
+                        weui.alert(`最多只能上传${finalMaxImgCount}张图片，请重新选择`);
+                        return false;
+                      }
+                      if (fileIdList.length + files.length > finalMaxImgCount) {
+                        weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
+                        return false;
+                      }
+                      files.forEach(f => uploadToTcb(f));
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SingleImage({src, deleteBySrc}) {
+  const [error, setError] = React.useState(false);
+  const cls = classNames({
+    'weui-uploader__file': true,
+  });
+  const [realSrc, setRealSrc] = React.useState('');
+  React.useEffect(() => {
+    const getSrc = async () => {
+      try {
+        const _src = await getTempFileURL(src);
+        setRealSrc(_src);
+        return _src;
+      } catch (e) {
+        setError(true);
+        console.error('图片加载失败');
+      }
+    };
+    if(isCloudFileID(src)) {
+      getSrc();
+    } else {
+      setRealSrc(src);
+    }
+  }, [src]);
+  const imgStyle = {
+    backgroundImage: `url(${realSrc})`
+};
+  const showGallery = () => {
+    const gallery = weui.gallery(realSrc, {
+      onDelete: function() {
+        deleteBySrc(src);
+        gallery.hide();
+      }
+    });
+  };
+  
+  return (
+    <li className={cls} style={imgStyle} onClick={showGallery}>
+        {
+            error || status ?
+            <div className="weui-uploader__file-content">
+                { error ? <i role="img" aria-label="错误" className="weui-icon-warn"></i> : <i className="weui-loading" style={{width: 30, height: 30}}></i> }
+            </div>
+            : false
+        }
+    </li>
+  );
+}
+SingleImage.propTypes = {
+  src: PropTypes.string,
+  deleteBySrc: PropTypes.func
+};
+ImageUploaderH5.propTypes = {
+  id: PropTypes.string,
+  title: PropTypes.string,
+  className: PropTypes.string, // 传入类
+  maxSize: PropTypes.number,
+  acceptTypes: PropTypes.array,
+  maxUploadCount: PropTypes.number, // 【上传图片最大数量】
+  events: PropTypes.objectOf(PropTypes.func), // 事件
+  style: PropTypes.object,
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 初始值，该参数需配合 formily 使用
+  single: PropTypes.bool, // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
+  onChange: PropTypes.objectOf(PropTypes.func), // 值变化，该参数需配合 formily 使用
+};

package/src/web/components/form/uploader/{uploaderPc.jsx → uploader.pc.jsx}

@@ -18,7 +18,7 @@ import * as PropTypes from 'prop-types';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
-const IMAGE_TYPES = [
+export const IMAGE_TYPES = [
   'image/jpg',
   'image/png',
   'image/tif',
@@ -31,7 +31,15 @@ const IMAGE_TYPES = [
  * 上传图片-官方组件
  */
 // eslint-disable-next-line react/prop-types
-export function UploaderPC({layout, className, id, style,title,tips, ...props }) {
+export function UploaderPC({
+  layout,
+  className,
+  id,
+  style,
+  title,
+  tips,
+  ...props
+}) {
   const cls = classNames({
     'weda-ui': true,
     [CLASS_PREFIX]: true,
@@ -40,25 +48,24 @@ export function UploaderPC({layout, className, id, style,title,tips, ...props })
   });
   return (
     <div className={cls} id={id} style={style}>
-        <div className={`${CLASS_PREFIX}__header`}>
-          {title && <div className={`${CLASS_PREFIX}__title`}>{title}</div>}
-          {tips && (
-            <div className={`${CLASS_PREFIX}__description`}>{tips || ''}</div>
-          )}
-        </div>
-        <UploaderPCInner {...props} />
+      <div className={`${CLASS_PREFIX}__header`}>
+        {title && <div className={`${CLASS_PREFIX}__title`}>{title}</div>}
+        {tips && (
+          <div className={`${CLASS_PREFIX}__description`}>{tips || ''}</div>
+        )}
+      </div>
+      <UploaderPCInner {...props} />
     </div>
-);
+  );
 }
 
-
 export function UploaderPCInner(props) {
   let {
     tips = '',
     btnTitle = '上传图片',
     maxUploadCount = 9,
     maxSize = 10,
-    value, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
+    value: defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
     acceptTypes = IMAGE_TYPES,
     uploadPath = 'weda-uploader',
     uploadFileName = 'image',
@@ -67,24 +74,25 @@ export function UploaderPCInner(props) {
     onChange,
   } = props;
 
-
-  
   // 上传中
   const [uploading, setUploading] = React.useState(false);
   //上传进度
   const [progress, setProgress] = React.useState(0);
   // 文件列表
   const [fileIDList, setfileIDList] = React.useState([]);
+  const prevValueRef = React.useRef();
   React.useEffect(() => {
-    let initialValue = []
-    .concat(value)
-    .filter((d) => typeof d === 'string' && d !== '');
-    if (single) {
-      maxUploadCount = 1;
-      initialValue = initialValue[0] ? [initialValue[0]] : [];
+    if (prevValueRef.current !== defaultValue) {
+      let initialValue = []
+        .concat(defaultValue)
+        .filter((d) => typeof d === 'string' && d !== '');
+      if (single) {
+        initialValue = initialValue[0] ? [initialValue[0]] : [];
+      }
+      setfileIDList(initialValue);
+      prevValueRef.current = defaultValue;
     }
-    setfileIDList(initialValue);
-  }, [value, maxUploadCount, single]);
+  }, [defaultValue, maxUploadCount, single]);
   const fileRef = React.useRef(fileIDList);
 
   // 值变化事件
@@ -159,7 +167,7 @@ export function UploaderPCInner(props) {
   const deleteHandle = (fileID) => {
     setfileIDList((list) => list.filter((d) => d !== fileID));
   };
-  
+
   // 转换后的属性
   const extraProps = {};
   extraProps['accept'] =
@@ -171,42 +179,52 @@ export function UploaderPCInner(props) {
 
   return (
     <ConfigProvider classPrefix="wedatea2td">
-        <div className="_weda-fn-upload-result">
-          {fileIDList.map((d) => (
-            <div className="_weda-fn-upload-result__item" key={d}>
-              <TcbImage fileID={d} />
-              <div className="_weda-fn-upload-result__op">
-                <Button
-                  onClick={() => deleteHandle(d)}
-                  className={`${CLASS_PREFIX}__btn`}
-                  >
-                  删除
-                </Button>
-              </div>
+      <div className="_weda-fn-upload-result">
+        {fileIDList.map((d) => (
+          <div className="_weda-fn-upload-result__item" key={d}>
+            <TcbImage fileID={d} />
+            <div className="_weda-fn-upload-result__op">
+              <Button
+                onClick={() => deleteHandle(d)}
+                className={`${CLASS_PREFIX}__btn`}
+              >
+                删除
+              </Button>
             </div>
-          ))}
-          {uploading && (
-            <div className="_weda-fn-upload-result__item">
-              <div className="_weda-fn-upload-result__status" key="_place_image">
-                <Icon type="loading" />
-                {!!progress && <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">上传{progress}%...</span>}
-              </div>
+          </div>
+        ))}
+        {uploading && (
+          <div className="_weda-fn-upload-result__item">
+            <div className="_weda-fn-upload-result__status" key="_place_image">
+              <Icon type="loading" />
+              {!!progress && (
+                <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">
+                  上传{progress}%...
+                </span>
+              )}
             </div>
-          )}
-          <div className={`${CLASS_PREFIX}__input-box`}>
-          {fileIDList.length < maxUploadCount &&
-          <Upload {...extraProps} beforeUpload={beforeHandle}>
+          </div>
+        )}
+        <div className={`${CLASS_PREFIX}__input-box`}>
+          {(fileIDList.length < maxUploadCount ||
+            (single && fileIDList.length < 1)) && ( // single 模式时，仅当数组为空时显示
+            <Upload {...extraProps} beforeUpload={beforeHandle}>
               <li className="_weda-fn-upload-result__item _weda-fn-upload-result__item--upload">
-              <div className="_weda-fn-upload-result__status">
-                <i className="wedatea2td-icon wedatea2td-icon-plus" role="img" aria-label="plus"></i>
-                <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">{btnTitle}</span>
-              </div>
-            </li>
-          </Upload>
-          }
-        </div>
+                <div className="_weda-fn-upload-result__status">
+                  <i
+                    className="wedatea2td-icon wedatea2td-icon-plus"
+                    role="img"
+                    aria-label="plus"
+                  ></i>
+                  <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">
+                    {btnTitle}
+                  </span>
+                </div>
+              </li>
+            </Upload>
+          )}
         </div>
-        
+      </div>
     </ConfigProvider>
   );
 }
@@ -224,7 +242,7 @@ export const TcbImage = (props) => {
         const _src = await getTempFileURL(fileID);
         _src ? setSrc(_src) : setIsError(true);
       } catch (e) {
-        message.error('图片加载失败');
+        message.error({ content: '图片加载失败' });
       }
     };
     isCloudFileID(fileID) ? getSrc() : setSrc(fileID);
@@ -278,11 +296,11 @@ UploaderPCInner.propTypes = {
   style: PropTypes.object,
   id: PropTypes.string,
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
 };
 
 TcbImage.propTypes = {
   fileID: PropTypes.string, // 云存储id
   isZoom: PropTypes.bool, // 是否点击放大
   onError: PropTypes.func, // 图片显示错误事件
-};
+};

package/src/web/components/image/image.jsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { usePlatform } from '../../utils/platform';
 import { ConfigProvider, ImagePreview } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import { useGesture } from '@use-gesture/react';
 
 ImageInner.propTypes = {
   objectFit: PropTypes.string,
@@ -11,17 +12,21 @@ ImageInner.propTypes = {
   src: PropTypes.string,
   alt: PropTypes.string,
   lazyLoad: PropTypes.bool,
+  isError: PropTypes.bool,
   setIsError: PropTypes.func,
   maskClosable: PropTypes.bool,
   imgPreview: PropTypes.bool
 };
 
+const failImgBase64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=';
+
 export function ImageInner({
   objectFit,
   style,
   className,
   alt,
   src,
+  isError,
   setIsError,
   events,
   lazyLoad,
@@ -35,7 +40,55 @@ export function ImageInner({
       setImgShow(false);
     }
   };
-  if(platform === 'h5' || !imgPreview) {
+
+  const [showHeight, setShowHeight] = React.useState(0);
+  const realWidth = React.useRef(0);
+  const realHeight = React.useRef(0);
+  const [offsetHeight, setOffsetHeight] = React.useState(0);
+  const [translateX, setTranslateX]= React.useState(0);
+  const [translateY, setTranslateY]= React.useState(0);
+  const [previewScale, setPreviewScale] = React.useState(1);
+  React.useEffect(() => {
+    // 防止触发浏览器的放大缩小
+    const handler = e => e.preventDefault();
+    document.addEventListener('gesturestart', handler);
+    document.addEventListener('gesturechange', handler);
+    return () => {
+      document.removeEventListener('gesturestart', handler);
+      document.removeEventListener('gesturechange', handler);
+    };
+  }, []);
+
+  const bind = useGesture({
+    onClick: ({event}) => {
+      // 防止冒泡出发关闭预览
+      event.stopPropagation();
+    },
+    onPinch: ({offset}) => {
+      const [s] = offset;
+      setPreviewScale(s);
+    },
+    onDrag: ({offset, event}) => {
+      event.stopPropagation();
+      const [x, y] = offset;
+      setTranslateX(x);
+      setTranslateY(y);
+      
+    },
+  }, {
+    drag: {
+      delay: true,
+      preventDefault: true,
+    },
+    pinch: {
+      scaleBounds: {min: 0.6, max: 5},
+      pointer: {
+        touch: true
+      }
+    }
+  });
+
+  if(platform === 'h5' || !imgPreview || isError) {
     return (
       <>
         <img
@@ -47,6 +100,11 @@ export function ImageInner({
           alt={alt}
           src={src}
           onLoad={(e) => {
+            /* @type {HTMLImageElement} */
+            const img = e.target;
+            const {naturalHeight, naturalWidth} = img;
+            realHeight.current = naturalHeight;
+            realWidth.current = naturalWidth;
             setIsError(false);
             events.load && events.load({}, { originEvent: e });
           }}
@@ -56,7 +114,16 @@ export function ImageInner({
           }}
           onClick={
             () => {
-              if(imgPreview) {
+              if(imgPreview && !isError) {
+                setTranslateX(0);
+                setTranslateY(0);
+                setPreviewScale(1);
+                const windowHeight = window.innerHeight;
+                const windowWidth = window.innerWidth;
+                const ratio = (realWidth.current / realHeight.current);
+                const height = windowWidth / ratio;
+                setOffsetHeight(windowHeight / 2 - (height / 2));
+                setShowHeight(height);
                 setImgShow(true);
               }
             }
@@ -68,8 +135,15 @@ export function ImageInner({
             <div onClick={() => setImgShow(false)} className="weda-img-modal-close-btn">
               <i className="weui-icon-clear" style={{color: 'white'}}></i>
             </div>
-            <div className="weda-img-preview" style={{
-              backgroundImage: `url(${src})`
+            
+            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+            <div {...bind()} className="weda-img-preview" style={{
+              touchAction: 'none',
+              backgroundImage: `url(${src})`,
+              width: '100%',
+              height: showHeight,
+              marginTop: offsetHeight,
+              transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`
             }}></div>
           </div>
         }

package/src/web/components/image/index.css

@@ -11,6 +11,7 @@
   left: 0;
   right: 0;
   background-color: black;
+  z-index: 99;
 }
 
 .weda-img-preview {
@@ -22,6 +23,7 @@
   right: 0;
   top: 0;
   bottom: 0;
+  z-index: 150;
 }
 
 .weda-img-modal-close-btn {
@@ -32,3 +34,19 @@
   z-index: 99;
   color: white;
 }
+
+.weda-image.weda-image-error {
+  position: relative;
+  display: inline-block;
+}
+
+.weda-image:not([src]):before,
+.weda-image-error::before {
+    content: '';
+    background: #f5f5f5 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=') no-repeat center / 50% 50%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}

package/src/web/components/image/index.jsx

@@ -54,6 +54,7 @@ export default function Image({
       className={cls}
       alt={alt}
       src={realSrc}
+      isError={isError}
       setIsError={setIsError}
       events={events}
       lazyLoad={lazyLoad}