All files / src/app/shared/components/product/product-image product-image.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
19x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div>
  <a
    *ngIf="link; else image"
    data-testing-id="product-image-link"
    [routerLink]="linkTarget || (productURL$ | async)"
    [queryParamsHandling]="computedQueryParamsHandling"
    [queryParams]="{ page: null }"
    tabindex="-1"
    ><ng-container *ngTemplateOutlet="image" />
  </a>
</div>
 
<ng-template #image>
  <ng-container *ngIf="productImage$ | async as image; else noImage">
    <img
      *ngIf="image.effectiveUrl; else noImage"
      [attr.loading]="loading"
      class="product-image"
      [src]="image.effectiveUrl"
      [attr.height]="image.imageActualHeight"
      [attr.width]="image.imageActualWidth"
      [alt]="altText || (defaultAltText$ | async)"
      itemprop="image"
    />
  </ng-container>
 
  <ng-template #noImage>
    <img
      [attr.loading]="loading"
      class="product-image"
      src="/assets/img/not-available.svg"
      [alt]="'product.image.not_available.alttext' | translate"
    />
  </ng-template>
</ng-template>