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:
@@ -29,7 +29,7 @@
|
||||
(touchstart)="onSwipeStart(item.itemID, $event)">
|
||||
<div class="cart-item">
|
||||
<a [routerLink]="['/product', item.itemID] | langRoute" class="item-image">
|
||||
<img [src]="getMainImage(item)" [alt]="itemName(item)" loading="lazy" />
|
||||
<img [src]="getMainImage(item)" [alt]="itemName(item)" loading="lazy" (error)="onImageError($event)" />
|
||||
</a>
|
||||
|
||||
<div class="item-info">
|
||||
@@ -216,7 +216,7 @@
|
||||
@if (qrCodeUrl()) {
|
||||
<div class="qr-section">
|
||||
<div class="qr-wrapper">
|
||||
<img [src]="qrCodeUrl()" [attr.alt]="'cart.paymentQrAlt' | translate" class="qr-code" />
|
||||
<img [src]="qrCodeUrl()" [attr.alt]="'cart.paymentQrAlt' | translate" class="qr-code" (error)="onImageError($event)" />
|
||||
<div class="scan-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user