From 31732599df8f6e203af21e134cbf41d245c4efce Mon Sep 17 00:00:00 2001 From: Ruslan Matkovskyi Date: Tue, 12 Dec 2023 09:27:28 +0100 Subject: [PATCH 1/2] [templates/nextjs-sxa] fixed request background image if it is empty --- .../src/templates/nextjs-sxa/src/components/Image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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..04e5e90d86 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?.value?.src}')` }; const modifyImageProps = { ...props.fields.Image, editable: props?.fields?.Image?.editable From 24a927267604bd13a0f68611d51a4d50bf4feba2 Mon Sep 17 00:00:00 2001 From: Ruslan Matkovskyi Date: Tue, 12 Dec 2023 15:39:50 +0100 Subject: [PATCH 2/2] #605472: changed CHANGELOG --- CHANGELOG.md | 1 + .../src/templates/nextjs-sxa/src/components/Image.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) 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 04e5e90d86..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 = props?.fields?.Image?.value?.src && { 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