Added default image and dynamic image load from backend.

01-frontend/src/helper/homepage/ItemCard.tsx

@@ -5,7 +5,6 @@ import Item from "../../components/Item";
 import { useBasket } from "../BasketProvider";
 import "../helper.css";
 import { useTranslation } from 'react-i18next';
-import HTWImage from '../../assets/HTW.jpg';
 
 export default function ItemCard({ item }: { item: Item }) {
 
@@ -22,6 +21,8 @@ export default function ItemCard({ item }: { item: Item }) {
         navigate(`/product/${item.id}`, { state: { item } });
     }
 
+    const imageUrl = `http://localhost:8085/image?articleId=${item.id}`;
+
     return (
         <Paper elevation={4}>
             <Card>
@@ -29,8 +30,11 @@ export default function ItemCard({ item }: { item: Item }) {
                     <CardMedia
                         component="img"
                         height="140"
-                        image={HTWImage}
+                        image={imageUrl}
                         alt={item.name}
+                        onError={(event) => {
+                            event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
+                        }}
                     />
                     <CardContent>
                         <Typography gutterBottom variant="h5" component="div">

01-frontend/src/helper/productpage/ProductInfo.tsx

@@ -53,6 +53,8 @@ export default function ProductInfo({ item }: { item: Item }) {
         setImageDimensions({ width: naturalWidth, height: naturalHeight });
     };
 
+    const imageUrl = `http://localhost:8085/image?articleId=${item.id}`;
+
     return (
         <Grid container spacing={4}>
             {/* Left Column - Image */}
@@ -60,9 +62,12 @@ export default function ProductInfo({ item }: { item: Item }) {
             <Card elevation={2} sx={{ width: '100%', maxWidth: 400 }}>
                 <Box
                     component="img"
-                    src="/src/assets/HTW.jpg"
+                    src={imageUrl}
                     alt={item.name}
                     onLoad={handleImageLoad} // Event-Handler zum Ermitteln der Bildgröße
+                    onError={(event) => {
+                        event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
+                    }}
                     sx={{
                         maxWidth: imageDimensions.width > imageDimensions.height ? "100%" : "auto",
                         maxHeight: imageDimensions.height >= imageDimensions.width ? 400 : "auto",