Description

The frontend generates HTTP requests to /images/products/undefined whenever a product is rendered without a picture field in the API response. This produces a flood of 404 errors visible in the frontend-proxy logs:

GET /images/products/undefined HTTP/1.1

Root Cause

All product image URLs are built by string-concatenating the picture field directly:

"/images/products/" + picture

When picture is undefined (e.g. during initial render before the query resolves, or for products with incomplete catalog data), JavaScript coerces it to the string "undefined", resulting in an invalid URL being requested.

The issue affects five components:

• src/frontend/components/ProductCard/ProductCard.tsx
• src/frontend/components/CartItems/CartItem.tsx
• src/frontend/components/CartDropdown/CartDropdown.tsx
• src/frontend/components/CheckoutItem/CheckoutItem.tsx
• src/frontend/pages/product/[productId]/index.tsx

Fix

Guard each image URL construction against a missing picture value:

• In ProductCard.tsx, add an early return inside the useEffect before the fetch is triggered:

  if (!picture) return;

• In the remaining four components, use a conditional expression:

  src={picture ? "/images/products/" + picture : ''}

This prevents the invalid request from being sent and leaves the image element empty when no picture is available.