image from assets by getImgUrl utility function

Author: msisaif

public/group-books.png

@@ -1,3 +1,4 @@
+import { getImgUrl } from "../utils";
 import AddToCart from "./AddToCart";
 import Ratings from "./Ratings";
 
@@ -17,7 +18,11 @@ function ProductCard({ product }) {
         className="grid cursor-pointer gap-2 pb-6 transition-all delay-100 ease-in hover:shadow-lg"
       >
         <div className="group relative">
-          <img src={image} />
+          <img
+            src={getImgUrl(image)}
+            alt={name}
+            className="aspect-square bg-brand-gray object-cover"
+          />
           <div className="absolute bottom-0 left-0 right-0 hidden w-full items-center justify-center bg-brand-dark py-1.5 text-sm text-white group-hover:flex">
             Quick View
           </div>

public/books/book-1.jpg src/assets/books/book-1.jpg

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { CartContext } from "../../context";
+import { getImgUrl } from "../../utils";
 
 function CartProduct({ product }) {
   const { cartItems, setCartItems } = useContext(CartContext);
@@ -42,7 +43,11 @@ function CartProduct({ product }) {
     <>
       <div className="grid border font-semibold sm:grid-cols-12 sm:gap-4 sm:p-4">
         <div className="flex items-center justify-center p-3 sm:col-span-2 sm:p-0">
-          <img src={image} className="h-20" />
+          <img
+            src={getImgUrl(image)}
+            alt={name}
+            className="aspect-square h-20 bg-brand-gray object-cover text-xs"
+          />
         </div>
         <div className="flex items-center justify-center border-t p-3 text-center sm:col-span-3 sm:border-0 sm:p-0">
           {name}

public/books/book-1.png src/assets/books/book-1.png

@@ -0,0 +1,6 @@
+export default function getImgUrl(path) {
+  console.log(path);
+  console.log(path.replace(/^\//, ""));
+
+  return new URL(`../assets/${path.replace(/^\//, "")}`, import.meta.url).href;
+}

public/books/book-2.png src/assets/books/book-2.png

@@ -0,0 +1,3 @@
+import getImgUrl from "./getImgUrl";
+
+export { getImgUrl };