refactor: image message

src/common/component/FileMessage/ImageMessage.js

@@ -1,4 +1,4 @@
-// import React from 'react'
+import { useState, useEffect } from "react";
 import styled from "styled-components";
 import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
@@ -29,7 +29,7 @@ const Styled = styled.div`
   }
 `;
 import { getDefaultSize } from "../../utils";
-export default function Image({
+export default function ImageMessage({
   uploading,
   progress,
   thumbnail,
@@ -37,8 +37,21 @@ export default function Image({
   content,
   properties = {},
 }) {
+  const [url, setUrl] = useState(thumbnail);
   const { width = 0, height = 0 } = getDefaultSize(properties);
   console.log("image props", properties, width, height);
+  useEffect(() => {
+    const newUrl = thumbnail;
+    const img = new Image();
+    img.onload = () => {
+      setUrl(newUrl);
+    };
+    img.onerror = () => {
+      setUrl("");
+    };
+    img.src = newUrl;
+  }, [thumbnail]);
+
   return (
     <Styled>
       {uploading && (
@@ -64,7 +77,7 @@ export default function Image({
         data-meta={JSON.stringify(properties)}
         data-origin={content}
         data-download={download}
-        src={thumbnail || download || content}
+        src={url}
       />
     </Styled>
   );

src/common/component/FileMessage/index.js

@@ -3,7 +3,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useSelector } from "react-redux";
 import Styled from "./styled";
-import Image from "./Image";
+import ImageMessage from "./ImageMessage";
 import useRemoveLocalMessage from "../../hook/useRemoveLocalMessage";
 import useUploadFile from "../../hook/useUploadFile";
 import useSendMessage from "../../hook/useSendMessage";
@@ -113,7 +113,8 @@ export default function FileMessage({
 
   if (isImage(content_type, size))
     return (
-      <Image
+      <ImageMessage
+        key={properties?.local_id}
         uploading={sending}
         progress={progress}
         properties={{ ...imageSize, ...properties }}