From 603d50a9088ac9a503adb317f6c56c3b7cb56e83 Mon Sep 17 00:00:00 2001 From: Ruslan Matkovskyi <100142572+matkovskyi@users.noreply.github.com> Date: Mon, 29 Jul 2024 22:54:48 +0200 Subject: [PATCH] [templates/nextjs-sxa]: Image component has been fixed #SXA-7448 (#1860) Co-authored-by: Ruslan Matkovsky (cherry picked from commit f3de975078be37442a04fc022e2d5127c64df59f) --- CHANGELOG.md | 2 +- .../src/templates/nextjs-sxa/src/components/Image.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b0da9f8595..1a60ce260d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,7 +32,7 @@ Our versioning strategy is as follows: * `[sitecore-jss-nextjs]` Updates to Next.js editing integration to further support secure hosting scenarios (on XM Cloud & Vercel) ([#1832](https://github.com/Sitecore/jss/pull/1832)) * `[templates/nextjs-xmcloud]` `[sitecore-jss]` A/B testing and component-level personalization support. ([#1844](https://github.com/Sitecore/jss/pull/1844))([#1847](https://github.com/Sitecore/jss/pull/1847))([#1848](https://github.com/Sitecore/jss/pull/1848)) * `[sitecore-jss]` `[nextjs-xmcloud]` DictionaryService can now use a `site` GraphQL query instead of `search` one to improve performance. This is currently only available for XMCloud deployments and is enabled with `nextjs-xmcloud` add-on by default ([#1804](https://github.com/Sitecore/jss/pull/1804))([#1846](https://github.com/Sitecore/jss/pull/1846))([commit](https://github.com/Sitecore/jss/commit/5813a2df8ad6a9ee63dd74d5f206ed4b4f758753))([commit](https://github.com/Sitecore/jss/commit/d0ea3ac02c78343b5dd60277dbf7403410794a49))([commit](https://github.com/Sitecore/jss/commit/307b905ed60d7fff44b2dc799fd78c0842af6fbd))([commit](https://github.com/Sitecore/jss/commit/66164a42263aac8b55f0c5e47eda4bd4d7a72e87)) -* `[templates/nextjs-sxa]` SXA components now use the NextImage component instead of the Image component from JSS lib for image optimization ([#1843](https://github.com/Sitecore/jss/pull/1843))([#1850](https://github.com/Sitecore/jss/pull/1850)) +* `[templates/nextjs-sxa]` SXA components now use the NextImage component instead of the Image component from JSS lib for image optimization ([#1843](https://github.com/Sitecore/jss/pull/1843))([#1850](https://github.com/Sitecore/jss/pull/1850))([#1860](https://github.com/Sitecore/jss/pull/1860)) * `[sitecore-jss-react]` `[sitecore-jss-nextjs]` `[sitecore-jss-angular]` `[sitecore-jss-vue]` The default Hidden Rendering component now contains the text 'The component is hidden' ([#1857](https://github.com/Sitecore/jss/pull/1857)) 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 48e3f92bbf..f920b59923 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 @@ -52,8 +52,7 @@ export const Banner = (props: ImageProps): JSX.Element => { ...props.fields.Image, value: { ...props.fields.Image.value, - width: "100%", - height: "100%", + style: { width: '100%', height: '100%' }, }, };