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