From fb0a9b50c18e4b3bb5a2196060280640095ba732 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 9 Mar 2026 18:19:35 -0500
Subject: [PATCH] fix(site): handle remote image URLs in Img component (#789)

---
 site/src/components/typography/Img.astro | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/site/src/components/typography/Img.astro b/site/src/components/typography/Img.astro
index d96116c9..6bbe5a5b 100644
--- a/site/src/components/typography/Img.astro
+++ b/site/src/components/typography/Img.astro
@@ -5,8 +5,16 @@ import type { ComponentProps } from 'astro/types';
 import { twMerge } from '@/utils/twMerge';
 
 type Props = ComponentProps<typeof Image>;
-const { class: className, ...rest } = Astro.props;
+const { class: className, src, ...rest } = Astro.props;
+
+const isRemote = typeof src === 'string' && src.startsWith('http');
 ---
 
-{/* @ts-expect-error tbh I don't know how to tell ts that inferSize is ok */}
-<Image class={twMerge("my-8", className)} inferSize {...rest} />
+{
+  isRemote ? (
+    <img class={twMerge("my-8", className)} src={src} {...rest} />
+  ) : (
+    // @ts-expect-error tbh I don't know how to tell ts that inferSize is ok
+    <Image class={twMerge("my-8", className)} inferSize src={src} {...rest} />
+  )
+}