Fix image bugs

jrmi · Sep 25, 2023 · a207a6e · a207a6e
1 parent 9e77b59
commit a207a6e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/src/gameComponents/Canvas.jsx b/src/gameComponents/Canvas.jsx
@@ -166,6 +166,7 @@ const NoCanvas = ({ layers, width, height }) => {
         <ImageElm
           src={firstImage.url}
           alt=""
+          onError={(e) => (e.target.src = "/default.png")}
           draggable={false}
           width={width}
           height={height}
@@ -176,6 +177,7 @@ const NoCanvas = ({ layers, width, height }) => {
           <ImageWrapper key={url}>
             <ImageElm
               src={url}
+              onError={(e) => (e.target.src = "/default.png")}
               alt=""
               draggable={false}
               style={{ marginLeft: offsetX * 2, marginTop: offsetY * 2 }}

diff --git a/src/mediaLibrary/ImageField.jsx b/src/mediaLibrary/ImageField.jsx
@@ -108,7 +108,12 @@ const ImageField = ({ value, onChange, onImageLoaded }) => {
       </form>
 
       <div className="imgContainer" onClick={(e) => e.preventDefault()}>
-        {type !== "empty" && content && <Thumbnail src={url} />}
+        {type !== "empty" && content && (
+          <Thumbnail
+            src={url}
+            onError={(e) => (e.target.src = "/default.png")}
+          />
+        )}
 
         {type === "external" && (
           <input

diff --git a/src/utils/api.js b/src/utils/api.js
@@ -36,6 +36,16 @@ export const uploadResourceImage = async (boxId, resourceId, file) => {
     credentials: "include",
   });
 
+  if (result.status === 404) {
+    throw new Error("Resource not found");
+  }
+  if (result.status === 403) {
+    throw new Error("Forbidden");
+  }
+  if (result.status >= 300) {
+    throw new Error("Server error");
+  }
+
   return await result.text();
 };
 

diff --git a/src/utils/image.js b/src/utils/image.js
@@ -13,7 +13,7 @@ export const getImageWithRetry = async (url, retry = 0) => {
       resolve(img);
     };
     img.onerror = () => {
-      if (retry < 3) {
+      if (retry < 2) {
         getImageWithRetry(url, retry + 1)
           .then(resolve)
           .catch(reject);
@@ -25,12 +25,20 @@ export const getImageWithRetry = async (url, retry = 0) => {
   });
 };
 
-export const getImage = async (url) => {
+export const getImage = (url, defaultImage = "/default.png") => {
   if (!url) {
     return null;
   }
   if (!imageCache[url]) {
-    imageCache[url] = getImageWithRetry(url);
+    imageCache[url] = new Promise((resolve) => {
+      console.log("promise", url);
+      getImageWithRetry(url)
+        .then(resolve)
+        .catch(async () => {
+          console.log(`Missing image <${url}>`);
+          resolve(await getImage(defaultImage));
+        });
+    });
   }
   return imageCache[url];
 };