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:
1 parent
02d493dede
commit
0a44fecbe1
3 files changed
+15
-4
No files matched your search
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user