diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
index f56bd99..046d6d1 100644
--- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
+++ b/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;
+    };
+
   }, []);
 
 
diff --git a/packages/biz/src/WarningRecordCard/demo/base.tsx b/packages/biz/src/WarningRecordCard/demo/base.tsx
index 4458795..12a37f0 100644
--- a/packages/biz/src/WarningRecordCard/demo/base.tsx
+++ b/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 (