Add watermark on product image

1 files changed, 7 insertions, 2 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}