Broken images are not ideal

Fixes #225
andrew-codes · Feb 19, 2024 · 36980a4 · 36980a4
1 parent 45fbe9f
commit 36980a4
Showing 1 changed file with 21 additions and 7 deletions.
diff --git a/apps/playnite-web/src/components/GameFigure.tsx b/apps/playnite-web/src/components/GameFigure.tsx
@@ -19,6 +19,7 @@ const Image = styled('img', {
   height: `${width}`,
   objectFit: 'cover',
   width,
+  display: 'block',
 }))
 
 const GameFigure: FC<
@@ -39,6 +40,8 @@ const GameFigure: FC<
   }, [])
   const { ref } = useInView({ onChange: handleChange })
 
+  const [imageHasError, setImageHasError] = useState(false)
+
   return (
     <Figure style={style} ref={ref} width={width}>
       {hasBeenInViewBefore || noDefer
@@ -47,13 +50,24 @@ const GameFigure: FC<
               sx={{ position: 'relative' }}
               key={`${game.oid.asString}-image`}
             >
-              <Image
-                src={game.cover}
-                alt={game.name}
-                width={width}
-                loading="eager"
-                onError={(e) => {}}
-              />
+              {!imageHasError ? (
+                <Image
+                  src={game.cover}
+                  alt={game.name}
+                  width={width}
+                  loading="eager"
+                  onError={(e) => {
+                    setImageHasError(true)
+                  }}
+                />
+              ) : (
+                <Box
+                  sx={{
+                    height: `${width}`,
+                    width: `${width}`,
+                  }}
+                ></Box>
+              )}
               <Box
                 sx={(theme) => ({
                   position: 'absolute',