diff --git a/CHANGELOG.md b/CHANGELOG.md
index caf1fb8b28..ff7f3fea15 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ Our versioning strategy is as follows:
 ### 🐛 Bug Fixes
 
 * `[templates/node-headless-ssr-proxy]` `[node-headless-ssr-proxy]` Add sc_site qs parameter to Layout Service requests by default ([#1660](https://github.com/Sitecore/jss/pull/1660))
+* `[templates/nextjs-sxa]` Fixed Image component when there is using Banner variant which set property background-image when image is empty. ([#1689](https://github.com/Sitecore/jss/pull/1689))
 
 ## 21.6.0
 
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 d830a951e2..e9c04c6eae 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
@@ -35,7 +35,7 @@ export const Banner = (props: ImageProps): JSX.Element => {
     isPageEditing && props.fields?.Image?.value?.class === 'scEmptyImage'
       ? 'hero-banner-empty'
       : '';
-  const backgroundStyle = { backgroundImage: `url('${props?.fields?.Image?.value?.src}')` };
+  const backgroundStyle = props?.fields?.Image?.value?.src && { backgroundImage: `url('${props.fields.Image.valuesrc}')` };
   const modifyImageProps = {
     ...props.fields.Image,
     editable: props?.fields?.Image?.editable