Fix image loading for svg error

Author: mathiasunneland

components/imageViewer.tsx

@@ -10,6 +10,23 @@ import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24
 const ImageViewer = ({ image }: { image?: SanityImageObject }) => {
     const [openImage, toggleOpenImage] = useToggle()
 
+    if (!image?.asset) return null
+
+    // ✅ Detect if image is an SVG (Sanity asset ref ends in -svg)
+    const isSVG = image.asset._ref?.includes("-svg")
+
+    const imageUrl = urlFor(image).url()
+
+    if (isSVG) {
+        return (
+            <img
+                src={imageUrl}
+                alt={image.alt ?? ""}
+                className="w-full object-contain max-h-[500px]"
+            />
+        )
+    }
+
     const showFullImage = (image ? getImageDimensions(urlFor(image).url()).aspectRatio : 0) > 16 / 7
 
     return (