From 13e9a02e033dc57721630aa1bdbc2de9c1223178 Mon Sep 17 00:00:00 2001
From: Giang Nguyen <giang.nguyentruong@optimizely.com>
Date: Wed, 19 Nov 2025 13:08:56 +0700
Subject: [PATCH] =?UTF-8?q?=EF=BB=BFException=20on=20AboutUs=20component?=
 =?UTF-8?q?=20if=20there=20is=20no=20data=20for=20image=20property?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: CMS-47074
---
 samples/nextjs-template/src/components/AboutUs.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/samples/nextjs-template/src/components/AboutUs.tsx b/samples/nextjs-template/src/components/AboutUs.tsx
index 6894ebdf..6c1bdc9e 100644
--- a/samples/nextjs-template/src/components/AboutUs.tsx
+++ b/samples/nextjs-template/src/components/AboutUs.tsx
@@ -1,5 +1,6 @@
 import { contentType, Infer } from '@optimizely/cms-sdk';
 import { RichText, ElementProps } from '@optimizely/cms-sdk/react/richText';
+import Image from 'next/image';
 
 export const AboutUsContentType = contentType({
   key: 'AboutUs',
@@ -33,9 +34,9 @@ const customHeadingTwo = (props: ElementProps) => {
 export default function AboutUs({ opti }: AboutUsProps) {
   return (
     <section className="about-us">
-      {opti.image && (
+      {opti?.image?.url?.default && (
         <div className="about-us-image">
-          <img src={opti.image.url.default ?? ''} alt="aboutus_image" />
+          <Image src={opti.image.url.default} alt="aboutus_image" />
         </div>
       )}
       <h2>{opti.heading}</h2>