perf: Warenkorb-Miniaturen ueber den Bildoptimierer laden

Die letzte Stelle, an der ein hochgeladenes Bild noch als rohes <img>
ausgeliefert wurde. Der Warenkorb lud damit fuer JEDE Position das
vollstaendig gespeicherte Bild — bis MAX_IMAGE_DIMENSION Kantenlaenge, also
durchaus ein paar hundert Kilobyte — nur um es auf 64 bzw. 80 Pixel zu
verkleinern. Bei mehreren Positionen summierte sich das spuerbar, gerade im
Mobilfunknetz, und betraf sowohl die Warenkorb-Schublade als auch die
Warenkorbseite.

Der bisherige eslint-disable-Kommentar begruendete das rohe <img> mit einer
"noch unbekannten externen Bildquelle". Das trifft nicht zu: das Bild kommt
aus Product.images[0] und liegt damit immer same-origin unter /uploads/...
(beim Speichern geprueft von isValidUploadPath in lib/uploads.ts).
next/image ist dafuer zustaendig und liefert jetzt eine 80px-Variante statt
der Originaldatei.

Beide Verwendungsstellen bekommen dieselbe leichte Eckenrundung wie die
uebrigen Bilder; vorher war die Schublade rounded-sm und die Warenkorbseite
gar nicht gerundet.
This commit is contained in:
Nick Szaunig committed 2026-09-14 20:55:50 +02:00
1 parent 02d493dede
commit 0a44fecbe1
3 files changed
+15 -4

No files matched your search

+1 -1
View File
@@ -80,7 +80,7 @@ export function WarenkorbContent({
const itemStock = stock?.[item.productId];
return (
<div key={item.productId} className="py-6 flex flex-wrap items-center gap-x-6 gap-y-3">
<CartItemThumbnail image={item.image} className="w-20 h-20 flex-shrink-0" />
<CartItemThumbnail image={item.image} className="w-20 h-20 flex-shrink-0 rounded-lg" />
<div className="flex-1 min-w-[160px]">
<Link href={`/honig/${item.slug}`} className="text-lg text-forest">
{item.name}