Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Artikelbilder lokal speichern und auf der Artikelseite anzeigen

Browse Source 
Open Food Facts liefert nur eine Bildadresse. Direkt dorthin zu verlinken hiesse:
Das Bild verschwindet, wenn OFF es austauscht, die Installation braucht Internet,
und jeder Seitenaufruf verraet OFF, welche Artikel jemand ansieht.

Das Bild wird daher einmal geholt und in einer eigenen Tabelle product_images
abgelegt - eigene Tabelle, damit Artikellisten die Blobs nicht mitziehen.
Geholt wird beim Anlegen, bei geaenderter Bildadresse und beim ersten Abruf
(so bekommen auch bestehende Artikel ihre Kopie, ohne Wanderung ueber alle
Datensaetze).

GET /products/{id}/image verlangt eine Anmeldung - aus den Bildern liesse sich
sonst ohne Konto ablesen, was im Vorrat liegt. Da ein <img src> keinen
Authorization-Header schickt, laedt die Oberflaeche das Bild ueber fetch und
zeigt es als Objekt-URL.

Angezeigt wird es rechts neben Barcode, Name und Marke. Fehlt ein Bild, rendert
die Komponente nichts und die Felder nehmen die volle Breite ein.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-23 13:35:10 +02:00
parent dc1750d23a
commit c155116b4e
8 changed files with 321 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/styles.css
View File

@@ -189,6 +189,25 @@ input:focus, select:focus {
input::placeholder { color: var(--muted); opacity: 0.7; }
.row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.row .grow { flex: 1; }
/* Artikelbild neben den Kennfeldern. min-width:0 an der Feldspalte, sonst
drueckt ein langer Produktname die Eingaben aus der Karte heraus. */
.produkt-kopf { display: flex; gap: var(--sp-4); align-items: flex-start; }
.produkt-kopf-felder { flex: 1 1 auto; min-width: 0; }
.produkt-bild {
flex: 0 0 auto;
width: 132px; height: 132px;
object-fit: contain; /* Verpackungen nie beschneiden */
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-2);
}
/* Auf schmalen Fenstern haben Bild und Felder nebeneinander keinen Platz mehr. */
@media (max-width: 560px) {
.produkt-kopf { flex-direction: column-reverse; }
.produkt-bild { width: 100%; height: 160px; }
}
.field-inline { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-4); }
/* Labels in einer Inline-Reihe duerfen keinen eigenen Abstand haben, sonst
rutschen daneben stehende Buttons optisch nach unten. */