diff --git a/CHANGELOG.md b/CHANGELOG.md
index d63a675dd3..b62a5c55aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Our versioning strategy is as follows:
 ### 🐛 Bug Fixes
 
 * `[templates/nextjs]` `[templates/react]` `[templates/vue]` `[templates/angular]` Changed formatting in temp/config to prevent parse issues in Unix systems ([#1787](https://github.com/Sitecore/jss/pull/1787))([#1791](https://github.com/Sitecore/jss/pull/1791))
+* `[templates/nextjs-sxa]` The banner variant of image component is fixed with supporting metadata mode. ([#1826](https://github.com/Sitecore/jss/pull/1826))
 
 ### 🎉 New Features & Improvements
 
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
index edbd2e4cbb..1c4266a322 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx
@@ -1,14 +1,14 @@
-import React, { CSSProperties } from 'react';
 import {
+  EditMode,
+  Field,
+  ImageField,
   Image as JssImage,
   Link as JssLink,
-  ImageField,
-  Field,
   LinkField,
   Text,
   useSitecoreContext,
-  EditMode,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import React, { CSSProperties } from 'react';
 
 interface Fields {
   Image: ImageField & { metadata?: { [key: string]: unknown } };
@@ -48,7 +48,14 @@ export const Banner = (props: ImageProps): JSX.Element => {
           ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
           .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
       }
-    : { ...props.fields.Image };
+    : {
+      ...props.fields.Image,
+      value: {
+        ...props.fields.Image.value,
+        width: "100%",
+        height: "100%",
+      },
+    };
 
   return (
     <div