Artikelbilder lokal speichern und auf der Artikelseite anzeigen
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:
@@ -82,6 +82,25 @@ function zeitstempel() {
|
||||
+ `_${zwei(jetzt.getHours())}${zwei(jetzt.getMinutes())}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bild mit Anmeldung laden und als lokale Objekt-URL zurückgeben.
|
||||
*
|
||||
* Nötig, weil ein <img src="…"> keinen Authorization-Header mitschickt. Ohne
|
||||
* diesen Umweg müsste die Bildroute offen sein – dann liesse sich ohne Konto
|
||||
* ablesen, was im Vorrat liegt.
|
||||
*
|
||||
* Gibt null zurück, wenn es kein Bild gibt; das ist der Normalfall und kein
|
||||
* Fehler. Wer die URL nicht mehr braucht, gibt sie mit URL.revokeObjectURL frei.
|
||||
*/
|
||||
export async function authorizedObjectUrl(path) {
|
||||
const token = getToken();
|
||||
const resp = await fetch(`${API_BASE}${path}`, {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
});
|
||||
if (!resp.ok) return null;
|
||||
return URL.createObjectURL(await resp.blob());
|
||||
}
|
||||
|
||||
// Datei mit Auth-Header laden und im Browser als Download anbieten.
|
||||
export async function downloadFile(path, filename) {
|
||||
const token = getToken();
|
||||
|
||||
Reference in New Issue
Block a user