Product images

database/initdb/0002.sh

@@ -25,7 +25,7 @@ psql -v ON_ERROR_STOP=1 --username pero --password "pero.000" --dbname komponira
     INSERT INTO public.products (id, name, description, image) VALUES (5, 'Kava', 'Kielbasa landjaeger sausage capicola sirloin filet mignon doner t-bone. Swine corned beef turkey hamburger flank pork chop capicola prosciutto venison shoulder strip steak jowl. Tongue pork salami biltong doner chislic andouille ball tip strip steak prosciutto.', 'kava.jpeg');
     INSERT INTO public.products (id, name, description, image) VALUES (6, 'Kava s mlijekom', 'Shoulder bacon flank chuck jowl hamburger swine fatback shank shankle t-bone buffalo leberkas cow.', 'kava-s-mlijekom.jpeg');
     INSERT INTO public.products (id, name, description, image) VALUES (7, 'Kava bez šećera', 'Pork pig prosciutto shoulder, landjaeger drumstick andouille filet mignon pork chop tri-tip bresaola tail.', 'kava-bez-secera.jpeg');
-    INSERT INTO public.products (id, name, description, image) VALUES (8, 'Cappuccino', 'Fatback frankfurter jowl capicola. Buffalo short loin pancetta cow ball tip chicken. Pork loin biltong filet mignon rump t-bone kielbasa tail hamburger jowl pancetta andouille short loin.', 'cappucino.jpeg');
+    INSERT INTO public.products (id, name, description, image) VALUES (8, 'Cappuccino', 'Fatback frankfurter jowl capicola. Buffalo short loin pancetta cow ball tip chicken. Pork loin biltong filet mignon rump t-bone kielbasa tail hamburger jowl pancetta andouille short loin.', 'cappuccino.jpeg');
     INSERT INTO public.products (id, name, description, image) VALUES (9, 'Mocca', 'Capicola salami shoulder tri-tip chicken meatball. Tail meatball filet mignon, landjaeger meatloaf sirloin strip steak chicken capicola picanha cow andouille rump shoulder. Chuck buffalo doner short ribs bacon ground round pancetta flank picanha pork loin.', 'mocca.jpeg');
     INSERT INTO public.products (id, name, description, image) VALUES (10, 'Sendvič sa sirom', 'Ball tip beef ribs shank ground round t-bone, strip steak leberkas chuck beef pancetta burgdoggen biltong doner swine brisket. Pork chop tail cow filet mignon salami spare ribs pork belly boudin. ', 'sendvic-sa-sirom.jpeg');
     INSERT INTO public.products (id, name, description, image) VALUES (11, 'Sendvič sa šunkom', 'Alcatra meatball filet mignon bresaola landjaeger, ham tenderloin chicken t-bone cow ham hock sausage fatback. Ground round cow ball tip ham venison beef ribs pork loin shank.', 'sendvic-sa-sunkom.jpeg');

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/";