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
37
38
39
40
41
42
43
44
45
46
19x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div>
  @if (link) {
    <a
      data-testing-id="product-image-link"
      tabindex="-1"
      [queryParams]="{ page: null }"
      [queryParamsHandling]="computedQueryParamsHandling"
      [routerLink]="linkTarget || (productURL$ | async)"
      ><ng-container *ngTemplateOutlet="image" />
    </a>
  } @else {
    <ng-container *ngTemplateOutlet="image" />
  }
</div>
 
<ng-template #image>
  @if (productImage$ | async; as image) {
    @if (image.effectiveUrl) {
      <img
        class="product-image"
        itemprop="image"
        [alt]="altText || (defaultAltText$ | async)"
        [attr.fetchpriority]="loading === 'eager' ? 'high' : null"
        [attr.height]="image.imageActualHeight"
        [attr.loading]="loading"
        [attr.width]="image.imageActualWidth"
        [src]="image.effectiveUrl"
      />
    } @else {
      <ng-container *ngTemplateOutlet="noImage" />
    }
  } @else {
    <ng-container *ngTemplateOutlet="noImage" />
  }
 
  <ng-template #noImage>
    <img
      class="product-image"
      src="/assets/img/not-available.svg"
      [alt]="'product.image.not_available.alttext' | translate"
      [attr.fetchpriority]="loading === 'eager' ? 'high' : null"
      [attr.loading]="loading"
    />
  </ng-template>
</ng-template>