u

src/components/brand/BrandThumb.jsx

@@ -16,11 +16,11 @@ export default class BrandThumb extends PureComponent {
     } = this.props;
     const pic = brand?.pics?.[0];
 
-    if (!pic?.thumbHash) {
+    if (!pic?.thumbHash && !pic?.fullHash) {
       return fallback;
     }
 
-    const { thumbHash, thumbW, thumbH } = pic;
+    const { thumbHash, fullHash, thumbW, thumbH } = pic;
     const ratio = thumbW && thumbH ? thumbW / thumbH : 1;
     // Contain-fit inside a square `size x size` box, preserving aspect ratio.
     let innerW = size;
@@ -58,6 +58,7 @@ export default class BrandThumb extends PureComponent {
           component="span"
           sx={{
             display: 'block',
+            position: 'relative',
             width: innerW,
             height: innerH,
             borderRadius: size >= 24 ? '4px' : '3px',
@@ -69,12 +70,29 @@ export default class BrandThumb extends PureComponent {
             boxShadow: SHADOW_THUMB_RING,
           }}
         >
-          <ThumbHashImage
-            thumbHash={thumbHash}
-            width={innerW}
-            height={innerH}
-            sx={{ width: innerW, height: innerH, flexShrink: 0 }}
-          />
+          {thumbHash ? (
+            <ThumbHashImage
+              thumbHash={thumbHash}
+              width={innerW}
+              height={innerH}
+              sx={{ width: innerW, height: innerH, flexShrink: 0 }}
+            />
+          ) : null}
+          {fullHash ? (
+            <Box
+              component="img"
+              src={`/api/smallthumb/${encodeURIComponent(fullHash)}`}
+              alt=""
+              draggable={false}
+              sx={{
+                position: 'absolute',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                display: 'block',
+              }}
+            />
+          ) : null}
         </Box>
       </Box>
     );