fix: 优化预警记录 od 添加容错 img.onerror

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -96,16 +96,19 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
   // 显示 od
   // 定义图片和canvas的引用
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imgRef = useRef<HTMLImageElement>(new Image())
+
 
   useEffect(() => {
     const canvas = canvasRef.current;
+    const img = imgRef.current
+
     const ctx = canvas?.getContext('2d');
-    const img = new Image();
+    // 可能 有 宽高 有 px 这里取number 
     img.width = imgStyle?.width ? parseInt(imgStyle?.width as string) : 336
     img.height = imgStyle?.height ? parseInt(imgStyle?.height as string) : 203
-    debugger
     if (!canvas || !ctx || !imageKey) return;
-    img.src = imageKey;
+    img.src = "imageKey";
 
     img.onload = () => {
 
@@ -123,6 +126,19 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
       ctx.strokeStyle = '#FFF566';
       ctx.strokeRect(x, y, width, height);
     };
+
+    img.onerror = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.strokeStyle = '#AAA';
+      ctx.strokeRect(0, 0, img.width, img.height);
+    };
+
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+
   }, []);
 
 

packages/biz/src/WarningRecordCard/demo/base.tsx

@@ -30,7 +30,7 @@ const backEndData = [
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
     odRect:{
-        "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
+        "x": 0.333125, "y": 0.45722223, "w": 0.048958335, "h": 0.2462963
       }
   }
 ]
@@ -50,7 +50,6 @@ const dataSource = backEndData.map(o => {
     odRect: o.odRect
   }
 })
-
 export default () => {
 
   return (