Add watermark on product image

1 files changed, 7 insertions, 2 deletions

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 2ab3ff59..fffe1480 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -1,6 +1,6 @@
 import style from '../styles/image.module.css';
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { InfoIcon } from 'lucide-react'
 import { Tooltip } from '@chakra-ui/react'
 
@@ -35,10 +35,15 @@ const Image = ({ product }: Props) => {
 
   const duration = moment.duration(count, 'seconds')
 
+  const image = useMemo(() => {
+    if (product.image) return product.image + '?watermark=true'
+    return '/images/noimage.jpeg'
+  }, [product.image])
+
   return (
     <div className={style['wrapper']}>
       <ImageUI
-        src={product.image || '/images/noimage.jpeg'}
+        src={image}
         alt={product.name}
         width={256}
         height={256}