fix(storefront): add missing placeholder image asset and onerror fallback
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:
@@ -1,7 +1,7 @@
|
||||
<article class="product-card" [class.product-card-compact]="appearance === 'compact'" (mouseenter)="preview.emit(item.itemID)">
|
||||
<a [routerLink]="['/product', item.itemID] | langRoute" class="product-link" (click)="onSelected($event)">
|
||||
<div class="product-image">
|
||||
<img [src]="getMainImage(item)" [alt]="title || item.name" loading="lazy" decoding="async" width="300" height="300" />
|
||||
<img [src]="getMainImage(item)" [alt]="title || item.name" loading="lazy" decoding="async" width="300" height="300" (error)="onImageError($event)" />
|
||||
@if (showDiscountBadge && item.discount > 0) {
|
||||
<div class="discount-badge" [attr.aria-label]="'common.discountLabel' | translate:{ value: item.discount }">-{{ item.discount }}%</div>
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { RouterLink } from '@angular/router';
|
||||
import { Product } from '../../core/products/models/product-domain.model';
|
||||
import { LangRoutePipe } from '../../pipes/lang-route.pipe';
|
||||
import { TranslatePipe } from '../../i18n/translate.pipe';
|
||||
import { cleanDescription, getBadgeClass, getDiscountedPrice, getMainImage } from '../../utils/item.utils';
|
||||
import { cleanDescription, getBadgeClass, getDiscountedPrice, getMainImage, onImageError } from '../../utils/item.utils';
|
||||
|
||||
const STOCK_LABEL_KEYS: Record<string, string> = {
|
||||
high: 'catalog.stockHigh',
|
||||
@@ -56,6 +56,7 @@ export class ProductCardComponent {
|
||||
readonly getDiscountedPrice = getDiscountedPrice;
|
||||
readonly getBadgeClass = getBadgeClass;
|
||||
readonly cleanDescription = cleanDescription;
|
||||
readonly onImageError = onImageError;
|
||||
|
||||
onAddToCart(event: Event): void {
|
||||
this.addToCart.emit({ itemID: this.item.itemID, event });
|
||||
|
||||
Reference in New Issue
Block a user