no image in detail food

src/app/[name]/(Main)/[id]/page.tsx

@@ -107,8 +107,8 @@ function FoodPage({ }: Props) {
                 ? foodData.images[0]
                 : typeof foodData.images[0] === 'object' && foodData.images[0] !== null && 'url' in foodData.images[0]
                     ? (foodData.images[0] as { url: string }).url
-                    : '/assets/images/food-preview-hq.png'
-            : '/assets/images/food-preview-hq.png';
+                    : '/assets/images/no-image.png'
+            : '/assets/images/no-image.png';
     const categoryName = foodData.category?.title;
     const prepareTime = foodData.prepareTime || 0;
     const price = foodData.price || 0;
@@ -120,7 +120,7 @@ function FoodPage({ }: Props) {
         <div className='lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2 bottom-10'>
             <div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
                 <Image
-                    className='w-full object-cover h-full'
+                    className='w-full object-cover bg-[#F2F2F9] h-full'
                     src={foodImage}
                     alt={foodName}
                     height={100}