sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(storefront): add missing placeholder image asset and onerror fallback

Browse Source 
getMainImage() referenced /assets/images/placeholder.svg as the no-image
fallback, but src/assets/images/ never existed - any item with zero
photos rendered a browser broken-image icon instead of a placeholder.
Added the asset.

Also added an (error) handler (onImageError) on every dynamic <img> that
renders a user/admin-supplied URL (product card, cart line item, cart
payment QR code, product gallery main + thumbnails) so a 404'd/broken
image URL swaps to the shared placeholder instead of shipping broken.
This commit is contained in:
sdarbinyan
2026-07-26 00:12:43 +04:00
parent 6c6fa00ccf
commit 3e54e88db7
8 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/utils/item.utils.ts
View File

@@ -13,6 +13,15 @@ export function getMainImage(item: Item): string {
return item.photos?.[0]?.url || '/assets/images/placeholder.svg';
}
const PLACEHOLDER_IMAGE = '/assets/images/placeholder.svg';
/** Swaps a broken/404'd <img> src to the shared placeholder, once, to avoid an infinite error loop. */
export function onImageError(event: Event): void {
const img = event.target as HTMLImageElement;
if (img.src.endsWith(PLACEHOLDER_IMAGE)) return;
img.src = PLACEHOLDER_IMAGE;
}
export function trackByItemId(_index: number, item: Item): number | string {
return item.id || item.itemID;
}