From b89955eecf94c6ff3cf1cd9ef9226e96bbaacf45 Mon Sep 17 00:00:00 2001
From: Rostislav Vitek <rostislav.vitek@shopsys.com>
Date: Fri, 17 Nov 2023 16:22:10 +0100
Subject: [PATCH] WIP

---
 storefront/components/Basic/Image/Image.tsx   | 54 +++++++++----------
 .../Blocks/BlogPreview/BlogPreviewMain.tsx    |  2 +-
 .../Blocks/BlogPreview/BlogPreviewSide.tsx    |  2 +-
 .../Blocks/OrderSummary/SingleProduct.tsx     |  2 +-
 .../OrderSummary/TransportAndPayment.tsx      |  4 +-
 .../Blocks/Product/AddToCartPopup.tsx         |  7 ++-
 .../Product/ProductsList/ProductListItem.tsx  |  2 +-
 .../SimpleNavigationListItem.tsx              |  2 +-
 .../Layout/Footer/FooterCopyright.tsx         |  2 +-
 .../AutocompleteSearchPopup.tsx               |  2 +-
 .../Layout/Header/Cart/CartListItem.tsx       |  6 ++-
 .../components/Layout/Header/Logo/Logo.tsx    |  6 +--
 .../Navigation/NavigationItemColumn.tsx       |  2 +-
 .../NotificationBars/NotificationBars.tsx     |  2 +-
 .../BlogArticle/BlogArticleDetailContent.tsx  |  6 ++-
 .../Pages/BlogCategory/BlogArticlesList.tsx   |  2 +-
 .../Pages/BrandDetail/BrandDetailContent.tsx  |  2 +-
 .../Pages/Cart/CartList/CartListItem.tsx      |  2 +-
 .../CategoryBestsellersListItem.tsx           |  2 +-
 .../Pages/Customer/OrdersContent.tsx          |  2 +-
 .../TransportAndPaymentSelectItemLabel.tsx    |  7 ++-
 .../ProductComparisonHeadItem.tsx             |  2 +-
 .../ProductComparisonHeadSticky.tsx           |  2 +-
 .../ProductDetail/ProductDetailGallery.tsx    |  2 +-
 .../ProductDetailVariantsTable.tsx            |  2 +-
 .../Pages/StoreDetail/StoreDetailContent.tsx  |  2 +-
 storefront/next.config.js                     | 11 ++++
 27 files changed, 81 insertions(+), 58 deletions(-)

diff --git a/storefront/components/Basic/Image/Image.tsx b/storefront/components/Basic/Image/Image.tsx
index 969d9f2c08..3e7a6254c9 100644
--- a/storefront/components/Basic/Image/Image.tsx
+++ b/storefront/components/Basic/Image/Image.tsx
@@ -1,20 +1,18 @@
-import { ImageFragmentApi } from 'graphql/generated';
 import { twMergeCustom } from 'helpers/twMerge';
-import { ImgHTMLAttributes } from 'react';
+import NextImage, { ImageProps } from 'next/image';
+import { ImgHTMLAttributes, useState } from 'react';
 
-type ImageProps = {
-    image: ImageFragmentApi | null | undefined;
+type ShopsysImageProps = {
+    src: string | null | undefined;
     alt: string | null | undefined;
     loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
-    width?: string | number;
-    height?: string | number;
     wrapperClassName?: string;
-};
+} & Omit<ImageProps, 'src'>;
 
 const getDataTestId = (dataTestId?: string) => dataTestId ?? 'basic-image';
 
-export const Image: FC<ImageProps> = ({
-    image,
+export const Image: FC<ShopsysImageProps> = ({
+    src,
     alt,
     loading,
     dataTestId,
@@ -22,37 +20,33 @@ export const Image: FC<ImageProps> = ({
     height,
     className,
     wrapperClassName,
+    fill,
 }) => {
     const imageTwClass = twMergeCustom(
         'object-contain [image-rendering:-webkit-optimize-contrast] max-w-full max-h-full mx-auto',
         className,
     );
+    const [imageUrl, setImageUrl] = useState(src ?? '/images/optimized-noimage.webp');
 
-    if (!image) {
-        return (
-            <div className={wrapperClassName}>
-                <img
-                    alt={alt || ''}
-                    className={twMergeCustom('h-auto w-full', imageTwClass)}
-                    data-testid={getDataTestId(dataTestId) + '-empty'}
-                    height={height || 160}
-                    src="/images/optimized-noimage.webp"
-                    width={width || 160}
-                />
-            </div>
-        );
+    let testIdentifier = getDataTestId(dataTestId);
+    if (!src) {
+        testIdentifier += '-empty';
     }
 
     return (
-        <picture className={wrapperClassName}>
-            <img
-                alt={image.name || alt || ''}
-                className={imageTwClass}
-                height={height}
+        <div className={wrapperClassName}>
+            <NextImage
+                alt={alt}
+                className={twMergeCustom('h-auto w-full', imageTwClass)}
+                data-testid={testIdentifier}
+                fill={fill}
+                height={height ?? 160}
+                loader={({ src, width }) => `${src}?width=${width || '0'}`}
                 loading={loading}
-                src={image.url}
-                width={width}
+                src={imageUrl}
+                width={width ?? 160}
+                onError={() => setImageUrl('/images/optimized-noimage.webp')}
             />
-        </picture>
+        </div>
     );
 };
diff --git a/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx b/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx
index d36b873252..92f2610e0f 100644
--- a/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx
+++ b/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx
@@ -22,7 +22,7 @@ export const BlogPreviewMain: FC<MainProps> = ({ articles }) => (
                     <Image
                         alt={article.mainImage?.name || article.name}
                         className="rounded"
-                        image={article.mainImage}
+                        src={article.mainImage?.url}
                     />
                 </ArticleLink>
 
diff --git a/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx b/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx
index 9447c80e4c..25ec45146f 100644
--- a/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx
+++ b/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx
@@ -16,7 +16,7 @@ export const BlogPreviewSide: FC<SideProps> = ({ articles }) => (
                     <Image
                         alt={article.mainImage?.name || article.name}
                         className="rounded"
-                        image={article.mainImage}
+                        src={article.mainImage?.url}
                     />
                 </ArticleLink>
 
diff --git a/storefront/components/Blocks/OrderSummary/SingleProduct.tsx b/storefront/components/Blocks/OrderSummary/SingleProduct.tsx
index f442e174dd..8acafba4eb 100644
--- a/storefront/components/Blocks/OrderSummary/SingleProduct.tsx
+++ b/storefront/components/Blocks/OrderSummary/SingleProduct.tsx
@@ -17,7 +17,7 @@ export const SingleProduct: FC<SingleProductProps> = ({ item }) => {
             <Image
                 alt={item.product.mainImage?.name || item.product.fullName}
                 className="mr-4 h-14 w-14"
-                image={item.product.mainImage}
+                src={item.product.mainImage?.url}
             />
 
             <div className="flex flex-1 items-center">
diff --git a/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx b/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
index c12be4b573..4d05f5ec30 100644
--- a/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
+++ b/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
@@ -33,7 +33,7 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
                         <OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-transport-name'}>
                             {transport.name}
                             <span className="inline-block align-bottom">
-                                <Image alt={transport.name} className="h-8 w-8" image={transport.mainImage} />
+                                <Image alt={transport.name} className="h-8 w-8" src={transport.mainImage?.url} />
                             </span>
                         </OrderSummaryTextAndImage>
                         <OrderSummaryPrice dataTestId={TEST_IDENTIFIER + '-transport-price'}>
@@ -46,7 +46,7 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
                         <OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-payment-name'}>
                             {payment.name}
                             <span className="inline-block align-bottom">
-                                <Image alt={payment.name} className="h-8 w-8" image={payment.mainImage} />
+                                <Image alt={payment.name} className="h-8 w-8" src={payment.mainImage?.name} />
                             </span>
                         </OrderSummaryTextAndImage>
                         <OrderSummaryPrice dataTestId={TEST_IDENTIFIER + '-payment-price'}>
diff --git a/storefront/components/Blocks/Product/AddToCartPopup.tsx b/storefront/components/Blocks/Product/AddToCartPopup.tsx
index c818fe02c4..782aa163fb 100644
--- a/storefront/components/Blocks/Product/AddToCartPopup.tsx
+++ b/storefront/components/Blocks/Product/AddToCartPopup.tsx
@@ -39,7 +39,12 @@ export const AddToCartPopup: FC<AddToCartPopupProps> = ({ onCloseCallback, added
             >
                 {!!product.mainImage && (
                     <div className="mb-4 flex w-24 items-center justify-center md:mb-0">
-                        <Image alt={product.mainImage.name || product.fullName} image={product.mainImage} />
+                        <Image
+                            alt={product.mainImage.name || product.fullName}
+                            height={48}
+                            src={product.mainImage.url}
+                            width={72}
+                        />
                     </div>
                 )}
                 <div className="w-full md:pl-4 lg:flex lg:items-center lg:justify-between">
diff --git a/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx b/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
index dd6fc62373..01515ae808 100644
--- a/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
+++ b/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
@@ -78,7 +78,7 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
                         <Image
                             alt={product.mainImage?.name || product.fullName}
                             className="h-40 justify-center lg:hover:mix-blend-multiply"
-                            image={product.mainImage}
+                            src={product.mainImage?.url}
                         />
                         {!!product.flags.length && (
                             <div className="absolute top-3 left-4 flex flex-col">
diff --git a/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx b/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx
index 5e8e979ff1..471c85501a 100644
--- a/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx
+++ b/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx
@@ -35,7 +35,7 @@ export const SimpleNavigationListItem: FC<SimpleNavigationListItemProps> = ({
                     <Image
                         alt={itemImage.name || listedItem.name}
                         className="h-12 min-w-[64px] mix-blend-multiply"
-                        image={itemImage}
+                        src={itemImage.url}
                         width={64}
                     />
                 )}
diff --git a/storefront/components/Layout/Footer/FooterCopyright.tsx b/storefront/components/Layout/Footer/FooterCopyright.tsx
index 20a041e6c6..30f7504c64 100644
--- a/storefront/components/Layout/Footer/FooterCopyright.tsx
+++ b/storefront/components/Layout/Footer/FooterCopyright.tsx
@@ -1,5 +1,5 @@
+import { Image } from 'components/Basic/Image/Image';
 import useTranslation from 'next-translate/useTranslation';
-import Image from 'next/image';
 
 const TEST_IDENTIFIER = 'layout-footer-footercopyright';
 
diff --git a/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx b/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx
index 74632ad03d..e978c8ccb3 100644
--- a/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx
+++ b/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx
@@ -121,7 +121,7 @@ export const AutocompleteSearchPopup: FC<AutocompleteProps> = ({
                                             <Image
                                                 alt={product.mainImage?.name || product.fullName}
                                                 className="flex h-16 w-20 items-center justify-center"
-                                                image={product.mainImage}
+                                                src={product.mainImage?.url}
                                                 wrapperClassName={imageTwClass}
                                             />
 
diff --git a/storefront/components/Layout/Header/Cart/CartListItem.tsx b/storefront/components/Layout/Header/Cart/CartListItem.tsx
index bcbee1de29..8b876f8c1f 100644
--- a/storefront/components/Layout/Header/Cart/CartListItem.tsx
+++ b/storefront/components/Layout/Header/Cart/CartListItem.tsx
@@ -23,7 +23,11 @@ export const ListItem: FC<ListItemProps> = ({ cartItem: { product, uuid, quantit
             className="flex w-full items-center gap-x-3 border-b border-greyLighter py-3"
             data-testid={TEST_IDENTIFIER}
         >
-            <Image alt={product.mainImage?.name || product.fullName} className="h-11 w-11" image={product.mainImage} />
+            <Image
+                alt={product.mainImage?.name || product.fullName}
+                className="h-11 w-11"
+                src={product.mainImage?.url}
+            />
 
             <ExtendedNextLink
                 className="flex-1 cursor-pointer text-sm font-bold text-greyDark no-underline outline-none"
diff --git a/storefront/components/Layout/Header/Logo/Logo.tsx b/storefront/components/Layout/Header/Logo/Logo.tsx
index 812cbb7509..2b57d9db16 100644
--- a/storefront/components/Layout/Header/Logo/Logo.tsx
+++ b/storefront/components/Layout/Header/Logo/Logo.tsx
@@ -1,7 +1,7 @@
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { LogoMetadata } from 'components/Basic/Head/LogoMetadata';
+import { Image } from 'components/Basic/Image/Image';
 import { twMergeCustom } from 'helpers/twMerge';
-import NextImage from 'next/image';
 
 const TEST_IDENTIFIER = 'layout-header-logo';
 
@@ -9,11 +9,11 @@ export const Logo: FC = () => (
     <>
         <LogoMetadata />
         <ExtendedNextLink className="flex-1 vl:flex-none" href="/" type="homepage">
-            <NextImage
+            <Image
                 priority
                 alt="Shopsys logo"
                 className={twMergeCustom('flex w-32 max-w-full lg:w-40')}
-                data-testid={TEST_IDENTIFIER}
+                dataTestId={TEST_IDENTIFIER}
                 height={38}
                 src="/images/logo.svg"
                 width={163}
diff --git a/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx b/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx
index e2e5af4e79..885b258411 100644
--- a/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx
+++ b/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx
@@ -22,7 +22,7 @@ export const NavigationItemColumn: FC<NavigationItemColumnProps> = ({ columnCate
                             <Image
                                 alt={columnCategory.mainImage?.name || columnCategory.name}
                                 className="h-16 mix-blend-multiply"
-                                image={columnCategory.mainImage}
+                                src={columnCategory.mainImage?.url}
                             />
                         </ExtendedNextLink>
 
diff --git a/storefront/components/Layout/NotificationBars/NotificationBars.tsx b/storefront/components/Layout/NotificationBars/NotificationBars.tsx
index 3e0a8ffead..c437c489d5 100644
--- a/storefront/components/Layout/NotificationBars/NotificationBars.tsx
+++ b/storefront/components/Layout/NotificationBars/NotificationBars.tsx
@@ -46,7 +46,7 @@ export const NotificationBars: FC = memo(function NotificationBars() {
                                     <Image
                                         alt={item.mainImage.name || item.text}
                                         className="mr-3"
-                                        image={item.mainImage}
+                                        src={item.mainImage.url}
                                     />
                                 </div>
                             )}
diff --git a/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx b/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx
index 637b83943b..a88da3526f 100644
--- a/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx
+++ b/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx
@@ -19,7 +19,11 @@ export const BlogArticleDetailContent: FC<BlogArticleDetailContentProps> = ({ bl
                 <div className="mb-12 flex w-full flex-col">
                     {blogArticle.mainImage && (
                         <div className="mb-10 flex overflow-hidden">
-                            <Image alt={blogArticle.mainImage.name || blogArticle.name} image={blogArticle.mainImage} />
+                            <Image
+                                alt={blogArticle.mainImage.name || blogArticle.name}
+                                src={blogArticle.mainImage.url}
+                                width={960}
+                            />
                         </div>
                     )}
 
diff --git a/storefront/components/Pages/BlogCategory/BlogArticlesList.tsx b/storefront/components/Pages/BlogCategory/BlogArticlesList.tsx
index 2534f355b8..1c121bd921 100644
--- a/storefront/components/Pages/BlogCategory/BlogArticlesList.tsx
+++ b/storefront/components/Pages/BlogCategory/BlogArticlesList.tsx
@@ -20,7 +20,7 @@ export const BlogArticlesList: FC<BlogArticlesListProps> = ({ blogArticles }) =>
                         <ExtendedNextLink href={blogArticle.link} type="blogArticle">
                             <Image
                                 alt={blogArticle.mainImage?.name || blogArticle.name}
-                                image={blogArticle.mainImage}
+                                src={blogArticle.mainImage?.url}
                             />
                         </ExtendedNextLink>
                     </div>
diff --git a/storefront/components/Pages/BrandDetail/BrandDetailContent.tsx b/storefront/components/Pages/BrandDetail/BrandDetailContent.tsx
index c03df543c9..da0862accf 100644
--- a/storefront/components/Pages/BrandDetail/BrandDetailContent.tsx
+++ b/storefront/components/Pages/BrandDetail/BrandDetailContent.tsx
@@ -21,7 +21,7 @@ export const BrandDetailContent: FC<BrandDetailContentProps> = ({ brand }) => {
                 <h1 className="mb-3">{brand.seoH1 !== null ? brand.seoH1 : brand.name}</h1>
                 <div className="mb-5 flex w-full flex-col justify-start md:flex-row">
                     <div className="mr-5 min-w-[13.75rem] self-start" data-testid={TEST_IDENTIFIER + 'image'}>
-                        <Image alt={brand.mainImage?.name || brand.name} image={brand.mainImage} />
+                        <Image alt={brand.mainImage?.name || brand.name} src={brand.mainImage?.url} />
                     </div>
                     <div
                         className="self-start  md:self-center [&>section]:text-base [&>section]:text-dark"
diff --git a/storefront/components/Pages/Cart/CartList/CartListItem.tsx b/storefront/components/Pages/Cart/CartList/CartListItem.tsx
index 14613b601a..bc6aa4901b 100644
--- a/storefront/components/Pages/Cart/CartList/CartListItem.tsx
+++ b/storefront/components/Pages/Cart/CartList/CartListItem.tsx
@@ -58,7 +58,7 @@ export const CartListItem: FC<CartListItemProps> = ({
                         <Image
                             alt={product.mainImage?.name || product.fullName}
                             className="h-14"
-                            image={product.mainImage}
+                            src={product.mainImage?.url}
                         />
                     </ExtendedNextLink>
                 </div>
diff --git a/storefront/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx b/storefront/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx
index 29c368621d..9deb857310 100644
--- a/storefront/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx
+++ b/storefront/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx
@@ -38,7 +38,7 @@ export const CategoryBestsellersListItem: FC<CategoryBestsellersListItemProps> =
                             alt={product.fullName}
                             className="max-h-[80px] max-w-[80px]"
                             dataTestId={TEST_IDENTIFIER + 'image'}
-                            image={product.mainImage}
+                            src={product.mainImage?.url}
                         />
                         <span>{product.fullName}</span>
                     </ExtendedNextLink>
diff --git a/storefront/components/Pages/Customer/OrdersContent.tsx b/storefront/components/Pages/Customer/OrdersContent.tsx
index 26132312d7..9fd3b20f8b 100644
--- a/storefront/components/Pages/Customer/OrdersContent.tsx
+++ b/storefront/components/Pages/Customer/OrdersContent.tsx
@@ -110,7 +110,7 @@ export const OrdersContent: FC<OrdersContentProps> = ({ isLoading, orders, total
                                                     alt={order.transport.mainImage?.name || order.transport.name}
                                                     className="h-9 w-9"
                                                     height={20}
-                                                    image={order.transport.mainImage}
+                                                    src={order.transport.mainImage?.url}
                                                     width={36}
                                                 />
                                                 <span className="flex-1">{order.transport.name}</span>
diff --git a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
index 4f942ce7f5..845558c2f1 100644
--- a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
+++ b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
@@ -29,7 +29,12 @@ export const TransportAndPaymentSelectItemLabel: FC<TransportAndPaymentSelectIte
 
     return (
         <div className="flex w-full flex-row items-center gap-3" data-testid={TEST_IDENTIFIER}>
-            <Image alt={image?.name} className="h-6 w-11 shrink-0 basis-11" image={image} wrapperClassName="shrink-0" />
+            <Image
+                alt={image?.name ?? name}
+                className="h-6 w-11 shrink-0 basis-11"
+                src={image?.url}
+                wrapperClassName="shrink-0"
+            />
 
             <div className="flex flex-1 flex-col text-sm lg:flex-auto lg:basis-full lg:flex-row lg:items-center lg:gap-3">
                 <div data-testid={TEST_IDENTIFIER + '-name'}>{name}</div>
diff --git a/storefront/components/Pages/ProductComparison/ProductComparisonHeadItem.tsx b/storefront/components/Pages/ProductComparison/ProductComparisonHeadItem.tsx
index c28face2a2..e04da387fc 100644
--- a/storefront/components/Pages/ProductComparison/ProductComparisonHeadItem.tsx
+++ b/storefront/components/Pages/ProductComparison/ProductComparisonHeadItem.tsx
@@ -40,7 +40,7 @@ export const ProductComparisonHeadItem: FC<ProductComparisonItemProps> = ({
             <div className="flex h-[365px] w-[182px] flex-col gap-2 sm:w-[205px]">
                 <div className="flex flex-col items-center ">
                     <div className="flex h-[185px] w-full items-center justify-center pt-4 pb-3">
-                        <Image alt={product.mainImage?.name || product.fullName} image={product.mainImage} />
+                        <Image alt={product.mainImage?.name || product.fullName} src={product.mainImage?.url} />
                     </div>
                     <ExtendedNextLink
                         className="text-primary no-underline hover:no-underline"
diff --git a/storefront/components/Pages/ProductComparison/ProductComparisonHeadSticky.tsx b/storefront/components/Pages/ProductComparison/ProductComparisonHeadSticky.tsx
index 108bd89ae5..9835f8de9f 100644
--- a/storefront/components/Pages/ProductComparison/ProductComparisonHeadSticky.tsx
+++ b/storefront/components/Pages/ProductComparison/ProductComparisonHeadSticky.tsx
@@ -27,7 +27,7 @@ export const ProductComparisonHeadSticky: FC<ProductComparisonHeadStickyProps> =
                         style={index === 0 ? { marginLeft: -props.tableMarginLeft } : undefined}
                     >
                         <a className="w-16" href={product.slug}>
-                            <Image alt={product.mainImage?.name || product.fullName} image={product.mainImage} />
+                            <Image alt={product.mainImage?.name || product.fullName} src={product.mainImage?.url} />
                         </a>
                         <div className="ml-2 flex flex-1 flex-col">
                             <a className="text-xs no-underline hover:no-underline" href={product.slug}>
diff --git a/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx b/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx
index 8d5e237259..50bd9b9bfd 100644
--- a/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx
+++ b/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx
@@ -36,7 +36,7 @@ export const ProductDetailGallery: FC<ProductDetailGalleryProps> = ({ flags, ima
                     alt={mainImage?.name || productName}
                     className="max-h-[460px] w-auto"
                     height={400}
-                    image={mainImage}
+                    src={mainImage?.url}
                     wrapperClassName="block h-full"
                 />
 
diff --git a/storefront/components/Pages/ProductDetail/ProductDetailVariantsTable.tsx b/storefront/components/Pages/ProductDetail/ProductDetailVariantsTable.tsx
index 912a4e4dc3..6e5836631e 100644
--- a/storefront/components/Pages/ProductDetail/ProductDetailVariantsTable.tsx
+++ b/storefront/components/Pages/ProductDetail/ProductDetailVariantsTable.tsx
@@ -32,7 +32,7 @@ export const ProductVariantsTable: FC<ProductVariantsTableProps> = ({ isSellingD
                     >
                         <Image
                             alt={variant.mainImage?.name || variant.fullName}
-                            image={variant.mainImage}
+                            src={variant.mainImage?.url}
                             wrapperClassName="flex h-48 lg:h-16 lg:w-16"
                         />
 
diff --git a/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx b/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx
index eacd883f9f..07e1489f19 100644
--- a/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx
+++ b/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx
@@ -119,7 +119,7 @@ export const StoreDetailContent: FC<StoreDetailContentProps> = ({ store }) => {
                                     <Image
                                         alt={image.name || `${store.storeName}-${index}`}
                                         className="cursor-pointer"
-                                        image={image}
+                                        src={image.url}
                                     />
                                 </div>
                             ))}
diff --git a/storefront/next.config.js b/storefront/next.config.js
index ae82fb46cc..4314d87add 100644
--- a/storefront/next.config.js
+++ b/storefront/next.config.js
@@ -20,6 +20,17 @@ const nextConfig = {
         disableClientWebpackPlugin: process.env.APP_ENV === 'development',
         hideSourceMaps: true,
     },
+    images: {
+        loader: 'custom',
+        remotePatterns: [
+            {
+                hostname: process.env.DOMAIN_HOSTNAME_1,
+            },
+            {
+                hostname: process.env.DOMAIN_HOSTNAME_2,
+            },
+        ],
+    },
     serverRuntimeConfig: {
         internalGraphqlEndpoint: `${process.env.INTERNAL_ENDPOINT}graphql/`,
     },