fix: og image load error

src/common/component/Message/URLPreview.tsx

@@ -1,9 +1,12 @@
 import { useState, useEffect } from "react";
+import { useDispatch } from "react-redux";
 import { useLazyGetOGInfoQuery } from "../../../app/services/message";
+import { upsertOG } from "../../../app/slices/footprint";
 import { useAppSelector } from "../../../app/store";
 
 
 export default function URLPreview({ url = "" }) {
+  const dispatch = useDispatch();
   const [favicon, setFavicon] = useState("");
   const [getInfo, { isLoading }] = useLazyGetOGInfoQuery();
   const ogData = useAppSelector(store => store.footprint.og[url]);
@@ -32,12 +35,9 @@ export default function URLPreview({ url = "" }) {
   // const handleFavError = () => {
   //   setFavicon("");
   // };
-  // const handleOGImageError = () => {
+  const handleOGImageError = () => {
-  //   setData(prev => {
+    dispatch(upsertOG({ key: url, value: { ...ogData, images: [] } }));
-  //     if (!prev) return prev;
+  };
-  //     return { ...prev, ogImage: "" };
-  //   });
-  // };
   if (isLoading) return <div className="h-28"></div>;
   if (!url || !data || !data.title) return null;
   const { title, description, ogImage } = data;
@@ -50,7 +50,7 @@ export default function URLPreview({ url = "" }) {
       <h3 className={`text-primary-500 w-full truncate`}>{title}</h3>
       <p className={`text-xs text-gray-400 mb-2 w-full truncate`}>{description}</p>
       <div className="w-full h-[180px]">
-        <img className="w-full h-full object-cover" src={ogImage} alt="og image" />
+        <img className="w-full h-full object-cover" onError={handleOGImageError} src={ogImage} alt="og image" />
       </div>
     </a>
   ) : (

src/types/resource.ts

@@ -44,9 +44,7 @@ export interface OG {
     width?: number;
     height?: number;
     alt?: string;
-  }[
+  }[];
-
-  ];
   audios: {
     type?: string;
     url: string;