From 229d4aa039bf44ced34122c273254d8961a3ed0c Mon Sep 17 00:00:00 2001
From: Scott Dixon <59898611+scottdixon@users.noreply.github.com>
Date: Thu, 3 Oct 2024 18:50:17 +1000
Subject: [PATCH] Image component: support local assets in development (#2573)

---
 .changeset/blue-ads-design.md              |  5 +++++
 packages/hydrogen-react/src/Image.test.tsx | 21 +++++++++++++++++++++
 packages/hydrogen-react/src/Image.tsx      |  5 +++--
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/blue-ads-design.md

diff --git a/.changeset/blue-ads-design.md b/.changeset/blue-ads-design.md
new file mode 100644
index 0000000000..9447414d52
--- /dev/null
+++ b/.changeset/blue-ads-design.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Image component: support local assets in development
diff --git a/packages/hydrogen-react/src/Image.test.tsx b/packages/hydrogen-react/src/Image.test.tsx
index 9a15c52abb..4f4a3a1b84 100644
--- a/packages/hydrogen-react/src/Image.test.tsx
+++ b/packages/hydrogen-react/src/Image.test.tsx
@@ -78,6 +78,27 @@ describe('<Image />', () => {
         crop,
       });
     });
+
+    it('handles remote assets', () => {
+      render(<Image {...defaultProps} />);
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'src',
+        'https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=100&crop=center',
+      );
+    });
+
+    it('handles local assets', () => {
+      const props = {
+        ...defaultProps,
+        src: '/assets/image.png',
+      };
+
+      render(<Image {...props} />);
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'src',
+        '/assets/image.png?width=100&crop=center',
+      );
+    });
   });
 
   describe('aspect-ratio', () => {
diff --git a/packages/hydrogen-react/src/Image.tsx b/packages/hydrogen-react/src/Image.tsx
index c2a06f0bc5..30276c2409 100644
--- a/packages/hydrogen-react/src/Image.tsx
+++ b/packages/hydrogen-react/src/Image.tsx
@@ -549,12 +549,13 @@ const FluidImage = React.forwardRef<HTMLImageElement, FluidImageProps>(
  * })
  * ```
  */
+const PLACEHOLDER_DOMAIN = 'https://placeholder.shopify.com';
 export function shopifyLoader({src, width, height, crop}: LoaderParams) {
   if (!src) {
     return '';
   }
 
-  const url = new URL(src);
+  const url = new URL(src, PLACEHOLDER_DOMAIN);
 
   if (width) {
     url.searchParams.append('width', Math.round(width).toString());
@@ -567,7 +568,7 @@ export function shopifyLoader({src, width, height, crop}: LoaderParams) {
   if (crop) {
     url.searchParams.append('crop', crop);
   }
-  return url.href;
+  return url.href.replace(PLACEHOLDER_DOMAIN, '');
 }
 
 /**