rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Friends-Avatare wieder Original-URL (kein Preview), SW by-v1111

Browse source 
User-Report: trotz onerror-Fallback weiter Fragezeichen.

Ursache: Das _preview.webp-System wurde damals nur konsequent für
Diary-Uploads ausgerollt. User-Avatare und Hund-Profilbilder haben
keine Preview-Variante → 404 vom _preview triggert kurz das
Browser-Default-Broken-Image-Icon BEVOR der onerror-Fallback das
Original lädt (Race-Condition).

Pragmatischer Fix: Preview-System in friends.js rückgebaut. Bilder
werden direkt mit Original-URL geladen. Performance kommt durch:
- loading=\"lazy\" (off-screen Bilder erst beim Scrollen)
- decoding=\"async\" (Main-Thread bleibt frei)
- onerror=\"this.style.display='none'\" (kaputte Bilder verschwinden
  statt Fragezeichen zu zeigen)

UI.previewUrl + UI.previewFallback bleiben als Helper verfügbar
für später falls das Preview-System app-weit ausgerollt wird.
This commit is contained in:
rene 2026-05-27 09:25:19 +02:00
parent 8e75e2b1a7
commit 2d98eb9374
6 changed files with 27 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1110'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1111'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
window.APP_VERSION = APP_VERSION;

23
backend/static/js/pages/friends.js
View file

@ -282,12 +282,12 @@ window.Page_friends = (() => {
: '';
const avatar = item.dog_foto
? `<img src="${_esc(UI.previewUrl(item.dog_foto))}" alt="${_esc(item.dog_name || '')}"
loading="lazy" decoding="async" onerror="${UI.previewFallback(item.dog_foto)}"
? `<img src="${_esc(item.dog_foto)}" alt="${_esc(item.dog_name || '')}"
loading="lazy" decoding="async" onerror="this.style.display='none'"
class="fr-activity-avatar">`
: item.avatar_url
? `<img src="${_esc(UI.previewUrl(item.avatar_url))}" alt="${_esc(item.user_name)}"
loading="lazy" decoding="async" onerror="${UI.previewFallback(item.avatar_url)}"
? `<img src="${_esc(item.avatar_url)}" alt="${_esc(item.user_name)}"
loading="lazy" decoding="async" onerror="this.style.display='none'"
class="fr-activity-avatar">`
: `<div class="fr-activity-avatar fr-activity-avatar--initial">
${_esc((item.user_name || '?')[0].toUpperCase())}
@ -539,8 +539,8 @@ window.Page_friends = (() => {
padding-top:var(--space-3);border-top:1px solid var(--c-border)">
${withPhotos.slice(0, 4).map(d => `
<div class="text-center">
<img src="${_esc(UI.previewUrl(d.foto_url))}" alt="${_esc(d.name)}"
loading="lazy" decoding="async" onerror="${UI.previewFallback(d.foto_url)}"
<img src="${_esc(d.foto_url)}" alt="${_esc(d.name)}"
loading="lazy" decoding="async" onerror="this.style.display='none'"
style="width:44px;height:44px;border-radius:50%;object-fit:cover;
border:2px solid var(--c-surface)">
<div style="font-size:10px;color:var(--c-text-muted);margin-top:2px;
@ -564,6 +564,7 @@ window.Page_friends = (() => {
<div class="text-center">
${d.foto_url
? `<img src="${_esc(d.foto_url)}" alt="${_esc(d.name)}"
loading="lazy" decoding="async" onerror="this.style.display='none'"
style="width:72px;height:72px;border-radius:50%;object-fit:cover;
border:2px solid var(--c-primary);margin-bottom:var(--space-2)">`
: `<div style="width:72px;height:72px;border-radius:50%;
@ -785,16 +786,14 @@ window.Page_friends = (() => {
// ----------------------------------------------------------
function _userAvatar(name, firstDog, avatarUrl) {
if (avatarUrl) {
return `<img src="${_esc(UI.previewUrl(avatarUrl))}" alt="${_esc(name)}"
loading="lazy" decoding="async"
onerror="${UI.previewFallback(avatarUrl)}"
return `<img src="${_esc(avatarUrl)}" alt="${_esc(name)}"
loading="lazy" decoding="async" onerror="this.style.display='none'"
style="width:44px;height:44px;border-radius:50%;object-fit:cover;
border:2px solid var(--c-primary);flex-shrink:0">`;
}
if (firstDog?.foto_url) {
return `<img src="${_esc(UI.previewUrl(firstDog.foto_url))}" alt="${_esc(firstDog.name)}"
loading="lazy" decoding="async"
onerror="${UI.previewFallback(firstDog.foto_url)}"
return `<img src="${_esc(firstDog.foto_url)}" alt="${_esc(firstDog.name)}"
loading="lazy" decoding="async" onerror="this.style.display='none'"
style="width:44px;height:44px;border-radius:50%;object-fit:cover;
border:2px solid var(--c-primary);flex-shrink:0">`;
}