fix:image opt. and aspect ratio in client preview

copilot-platforms · Feb 28, 2024 · d78c5af · d78c5af
1 parent 4d0b62b
commit d78c5af
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/src/app/client-preview/page.tsx b/src/app/client-preview/page.tsx
@@ -2,6 +2,7 @@ import Handlebars from 'handlebars'
 import { IClient, ISettings } from '@/types/interfaces'
 import ClientPreview from '../components/ClientPreview'
 import { apiUrl } from '@/config'
+import Image from 'next/image'
 
 export const revalidate = 0
 
@@ -72,6 +73,12 @@ export default async function ClientPreviewPage({
 
   const htmlContent = template({ client })
 
+  const bannerImgUrl = !_settings
+    ? '/images/default_banner.png'
+    : settings?.bannerImage?.url
+
+  console.log(settings?.bannerImage?.url)
+
   return (
     <div
       className={`overflow-y-auto overflow-x-hidden max-h-screen w-full`}
@@ -80,16 +87,17 @@ export default async function ClientPreviewPage({
       }}
     >
       {settings?.bannerImage?.url && (
-        <img
-          className='w-full object-fill xl:object-cover'
-          src={
-            !_settings
-              ? '/images/default_banner.png'
-              : settings?.bannerImage.url
-          }
+        <Image
+          className='w-full'
+          src={bannerImgUrl || '/images/default_banner.png'}
           alt='banner image'
+          width={0}
+          height={0}
+          sizes='100vw'
           style={{
+            width: '100%',
             height: '25vh',
+            objectFit: 'cover',
           }}
         />
       )}