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

4
src/app/pages/cart/cart.component.html
View File

@@ -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>

3
src/app/pages/cart/cart.component.ts
View File

@@ -9,7 +9,7 @@ import { EMPTY, interval, of, Subscription } from 'rxjs';
import { catchError, exhaustMap, take, timeout } from 'rxjs/operators';
import { DeliverySelectorComponent } from '../../components/delivery-selector/delivery-selector.component';
import { TelegramLoginComponent } from '../../components/telegram-login/telegram-login.component';
import { getDiscountedPrice, getMainImage, trackByItemId, getBadgeClass, getTranslatedField } from '../../utils/item.utils';
import { getDiscountedPrice, getMainImage, trackByItemId, getBadgeClass, getTranslatedField, onImageError } from '../../utils/item.utils';
import { LangRoutePipe } from '../../pipes/lang-route.pipe';
import { TranslatePipe } from '../../i18n/translate.pipe';
import { TranslateService } from '../../i18n/translate.service';
@@ -255,6 +255,7 @@ export class CartComponent implements OnDestroy {
}
readonly getMainImage = getMainImage;
readonly onImageError = onImageError;
readonly trackByItemId = trackByItemId;
readonly getDiscountedPrice = getDiscountedPrice;
readonly getBadgeClass = getBadgeClass;