[templates/nextjs-sxa] fixed request background image if it is empty (#…

…1689) * [templates/nextjs-sxa] fixed request background image if it is empty * #605472: changed CHANGELOG --------- Co-authored-by: Ruslan Matkovskyi <[email protected]>
Sitecore · Dec 12, 2023 · 69473d0 · 69473d0
1 parent 3fbff9b
commit 69473d0
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git 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
@@ -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