Product images

frontend/public/static/products/.comments/coca-cola.jpeg.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<comment version="3.0">
+  <caption>FILE PHOTO: Coca-cola soda is shown on display during a preview of a new Walmart Super Center prior to its opening in Compton, California,</caption>
+  <note>FILE PHOTO: Coca-cola soda is shown on display during a preview of a new Walmart Super Center prior to its opening in Compton, California, U.S., January 10, 2017.  REUTERS/Mike Blake/File Photo</note>
+  <place/>
+  <categories/>
+</comment>

frontend/src/components/ProductCard.js

@@ -4,17 +4,15 @@ import CardContent from "@mui/material/CardContent";
 import CardMedia from "@mui/material/CardMedia";
 import Typography from "@mui/material/Typography";
 import { CardActionArea } from "@mui/material";
+import { PRODUCT_IMAGE_DIR } from "../const";
 
 function ProductCard({ product }) {
+    const productImg = `${PRODUCT_IMAGE_DIR}/${product.image}`;
+
     return (
         <Card>
             <CardActionArea>
-                <CardMedia
-                    component="img"
-                    height="140"
-                    image="/static/images/cards/contemplative-reptile.jpg"
-                    alt="green iguana"
-                />
+                <CardMedia component="img" height="140" image={productImg} alt={product.name} />
                 <CardContent>
                     <Typography gutterBottom variant="h5" component="div">
                         {product.name}

frontend/src/const.js

@@ -1 +1,2 @@
 export const API_URL = process.env.REACT_APP_BACKEND_API_URL || "http://localhost:10000";
+export const PRODUCT_IMAGE_DIR = "/static/products/";