L'importation d'image fonctionne. Il manque à faire fonctionner la modifiction et le delete avec.

GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+
+const FeaturedImage = ({ productId }) => {
+
+    const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
+
+    useEffect(() => {
+        fetch(`https://localhost:7292/api/Image?id=${productId}`)
+        .then(response => response.blob())
+        .then(blob => {
+            const imageUrl = URL.createObjectURL(blob);
+            setImageSrc(imageUrl);
+        })
+    },[]);
+
+
+    return (
+        <img
+            className="featured-img"
+            src={imageSrc}
+            alt={productId + "_image"}
+        />
+    );
+}
+
+export default FeaturedImage;

GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedList.js

@@ -1,5 +1,7 @@
 import { Carousel } from "react-bootstrap";
 import { Link } from "react-router-dom";
+import FeaturedImage from "./FeaturedImage";
+
 const FeaturedList = ({ products }) => {
     if (products === null)
         return (<></>);
@@ -9,10 +11,7 @@ const FeaturedList = ({ products }) => {
 
                 <Carousel.Item key={product.id} className="featured-itm">
                     <Link key={product.id} to={`/morceaux/${product.id}`}>
-                        <img
-                            className="featured-img"
-                            src={`/images/${product.imageName}.jpg`}
-                        />
+                        <FeaturedImage productId={product.id}/>
                         <Carousel.Caption className="featured-info">
                             <h3>{product.title}</h3>
                             <p>{product.description}</p>

GrossesMitaines/grosses-mitaines-ui/src/components/Item.js

@@ -1,13 +1,7 @@
 import { Card } from "react-bootstrap";
+import { useState, useEffect } from "react";
+
 
-// public enum States { 
-//     Available,
-//     BackOrder,
-//     Unavailable,
-//     Clearance,
-//     Promotion,
-//     Discontinued
-// }
 function renderStatus(statusCode) {
     if (statusCode !== undefined) {
 
@@ -62,7 +56,7 @@ function renderPrice(price, newPrice, status) {
     if (price !== undefined) {
 
 
-        if (status != 3 && status != 4) {
+        if (status !== 3 && status !== 4) {
             return (
                 <Card.Text className="item-price-container">
                     <span className="item-price">
@@ -87,12 +81,25 @@ function renderPrice(price, newPrice, status) {
 
 }
 
-const Item = ({ imageUrl, name, price, newPrice, status }) => {
+const Item = ({ productId, name, price, newPrice, status }) => {
+
+    const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
+
+    useEffect(() => {
+        fetch(`https://localhost:7292/api/Image?id=${productId}&thumbnail=true`)
+            .then(response => response.blob())
+            .then(blob => {
+                const imageUrl = URL.createObjectURL(blob);
+                setImageSrc(imageUrl);
+            })
+    }, []);
+
+
     if (name !== undefined) {
         return (
 
             <Card className="item">
-                <Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} />
+                <Card.Img className="item-img" variant="top" src={imageSrc} />
                 <Card.Body className="item-info">
                     <div className="item-name-container">
                         <Card.Title className="item-name">

GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js

@@ -9,7 +9,8 @@ const ItemList = ({ items }) => {
                 {items.length <= 0 && <p>Aucun morceaux à montrer...</p>}
                 {items.map((item) =>
                     <Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
-                        <Item  imageUrl={item.imageName}
+                        <Item  
+                        productId={item.id}
                             name={item.title}
                             price={item.price}
                             status={item.status}