Artikelbild: nur noch an einer Stelle, hochkant, und beim Import beruecksichtigt

Das alte Bild in der Chargen-Karte entfaellt - seit dem neuen Bild neben den
Kennfeldern stand es doppelt auf der Seite.

Der Rahmen ist jetzt hochkant (3:4) statt quadratisch. Lebensmittelverpackungen
sind fast immer hoeher als breit; im Quadrat blieben links und rechts leere
Streifen.

Beim Import wurde image_url komplett verworfen, obwohl das JSON-Backup sie
enthaelt - eingelesene Artikel blieben deshalb dauerhaft ohne Bild. Die Adresse
wird jetzt uebernommen (bei bestehenden Artikeln nur ergaenzend, nie
ueberschreibend); die lokale Kopie holt der Bildabruf beim ersten Ansehen.
Bewusst nicht waehrend des Imports: Ein Backup mit 200 Artikeln wuerde sonst
200 Downloads in einer Anfrage abarbeiten.

Ausserdem holen jetzt auch Artikelliste, Ein- und Auslagern ihr Vorschaubild
aus der eigenen Datenbank statt direkt von Open Food Facts. Einzige Ausnahme
bleibt der OFF-Vorschlag beim Scannen: Dort existiert der Artikel noch nicht.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/pages/CheckIn.jsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { api } from "../api";
 import { useAuth } from "../auth";
 import Icon from "../components/Icon";
+import { ProduktThumb } from "../components/ProduktBild";
 import { useToast } from "../toast";
 import { suggestionToProduct } from "../offUtils";
 import { asTree } from "../categoryTree";
@@ -277,6 +278,9 @@ export default function CheckIn() {
 
             {suggestion && (
               <div className="suggestion">
+                {/* Hier ausnahmsweise direkt von Open Food Facts: Der Artikel
+                    existiert noch gar nicht, es gibt also nichts Lokales. Ab
+                    dem Anlegen kommt das Bild aus der eigenen Datenbank. */}
                 {suggestion.image_url
                   ? <img className="thumb" src={suggestion.image_url} alt="" />
                   : <span className="thumb thumb-fallback"><Icon name="box" size={16} /></span>}
@@ -354,9 +358,7 @@ export default function CheckIn() {
       {product && (
         <form className="card form-narrow" onSubmit={submit}>
           <div className="selected-product">
-            {product.image_url
-              ? <img className="thumb" src={product.image_url} alt="" />
-              : <span className="thumb thumb-fallback"><Icon name="box" size={16} /></span>}
+            <ProduktThumb productId={product.id} alt={product.name} />
             <div className="info">
               <div className="title">{product.name}</div>
               <div className="muted small">Bestand: {fmt(product.stock / (product.unit_factor || 1))} {product.unit_name}</div>

web/src/pages/CheckOut.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import Icon from "../components/Icon";
+import { ProduktThumb } from "../components/ProduktBild";
 import { useToast } from "../toast";
 import { useSettings } from "../settings";
 import { buildUnitOptions, fmt, isExpired, unitShort } from "../units";
@@ -143,9 +144,7 @@ export default function CheckOut() {
       {product && (
         <form className="card form-narrow" onSubmit={submit}>
           <div className="selected-product">
-            {product.image_url
-              ? <img className="thumb" src={product.image_url} alt="" />
-              : <span className="thumb thumb-fallback"><Icon name="box" size={16} /></span>}
+            <ProduktThumb productId={product.id} alt={product.name} />
             <div className="info">
               <div className="title">{product.name}</div>
               <div className="muted small">

web/src/pages/ProductForm.jsx

@@ -400,7 +400,6 @@ export default function ProductForm() {
             baseShort={baseShort}
             warnDays={warnDays}
             isAdmin={isAdmin}
-            imageUrl={form.image_url}
             onChanged={async () => {
               setLots(await api.listLots(id));
               setProduct(await api.getProduct(id));
@@ -438,7 +437,7 @@ export default function ProductForm() {
 }
 
 /** Chargen-Karte mit Bearbeiten/Löschen. Bearbeitet wird in der Produkteinheit. */
-function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onChanged, onError }) {
+function LotsCard({ product, lots, baseShort, warnDays, isAdmin, onChanged, onError }) {
   const confirm = useConfirm();
   const toast = useToast();
   const { formatBestBefore } = useSettings();
@@ -532,7 +531,6 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha
           Dieses Produkt hat abgelaufene Chargen im Bestand.
         </div>
       )}
-      {imageUrl && <img className="product-img" src={imageUrl} alt="" />}
       <div className="table-wrap">
         <table className="table">
           <thead>

web/src/pages/Products.jsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { api } from "../api";
 import { useAuth } from "../auth";
 import Icon from "../components/Icon";
+import { ProduktThumb } from "../components/ProduktBild";
 import { fmt, unitShort } from "../units";
 import { asTree } from "../categoryTree";
 
@@ -95,9 +96,7 @@ export default function Products() {
                 return (
                   <tr key={p.id}>
                     <td className="thumb-cell">
-                      {p.image_url
-                        ? <img className="thumb" src={p.image_url} alt="" />
-                        : <span className="thumb thumb-fallback"><Icon name="box" size={16} /></span>}
+                      <ProduktThumb productId={p.id} alt={p.name} />
                     </td>
                     <td data-label="Name" className="strong">
                       <span className="cell-row">