Image component: support local assets in development (#2573)

Shopify · Oct 3, 2024 · 229d4aa · 229d4aa
1 parent f041568
commit 229d4aa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/.changeset/blue-ads-design.md 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
@@ -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
@@ -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, '');
 }
 
 /**