Add watermark on product image

2 files changed, 14 insertions, 4 deletions

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 0a97b344..34f6d6b1 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -1,7 +1,7 @@
 import style from '../styles/product-card.module.css'
 
 import Link from 'next/link'
-import React from 'react'
+import React, { useMemo } from 'react'
 import Image from '~/components/ui/image'
 import clsxm from '~/libs/clsxm'
 import formatCurrency from '~/libs/formatCurrency'
@@ -20,6 +20,11 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
     manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()),
   }
 
+  const image = useMemo(() => {
+    if (product.image) return product.image + '?watermark=true'
+    return '/images/noimage.jpeg'
+  }, [product.image])
+
   return (
     <div className={clsxm(style['wrapper'], {
       [style['wrapper-v']]: layout === 'vertical',
@@ -32,7 +37,7 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
       })}>
         <Link href={URL.product}>
           <Image
-            src={product.image || '/images/noimage.jpeg'}
+            src={image}
             alt={product.name}
             width={128}
             height={128}
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}