'How to correctly display multiple versions of a picture on the frontend. Angular

From the backend comes to the network several different sizes of the same image. This was done recently for optimization purposes. Previously, users could upload a picture too big and it was very busy on some pages.

If the picture was uploaded before this image compression feature was implemented, then the network receives an empty array. And if after, then objects with three different sizes of this picture.

This is probably a very naive and silly question, but how do I output compressed images by default? What if the "sizes": [] will be an empty array, then leave the old image path?

I tried this option, but it doesn't work: <img [src]="place.gallery[0].file.sizes[0].thumb || place.gallery[0].file.thumb">

// This comes from the backend:

{
    "id": 1016,
    "file_id": 1653,
    "place_id": 55,
    "order": 2,
    "cover": 0,
    "file": {
      "id": 1653,
      "type": "image",
      "path": "https://<<CORRENT URL>>",
      "thumb": "https://<<CORRENT URL>>",
      "created_at": "2022-03-15 16:58:50",
      "updated_at": "2022-03-15 16:58:50",
      "sizes": [
        {
          "id": 10,
          "file_id": 1653,
          "size": "small",
          "path": "https://<<CORRENT URL>>"
        },
        {
          "id": 11,
          "file_id": 1653,
          "size": "medium",
          "path": "https://<<CORRENT URL>>"
        },
        {
          "id": 12,
          "file_id": 1653,
          "size": "big",
          "path": "https://<<CORRENT URL>>"
        }
      ]
    }
  },
  {
    "id": 1017,
    "file_id": 551,
    "place_id": 55,
    "order": 3,
    "cover": 0,
    "file": {
      "id": 551,
      "type": "image",
      "path": "https://<<CORRENT URL>>",
      "thumb": "https://<<CORRENT URL>>",
      "created_at": "2021-12-28 02:37:56",
      "updated_at": "2021-12-28 02:37:56",
      "sizes": []
    }
  }
  
  
<div class="place-gallery" *ngIf="place.gallery.length">
          <div (click)="appService.openLightbox(0, place.getAlbumGallery)" class="place-gallery-item">
            <img [src]="place.gallery[0].file.thumb">
          </div>

          <div *ngIf="place.gallery.length >= 2"(click)="appService.openLightbox(0, place.getAlbumGallery)" class="place-gallery-all">
            {{HelperService.translate('website.places.photos')}}
            (<span>{{place.gallery.length}}</span>)
          </div>
        </div>

        <div class="place-gallery-middle" *ngIf="place.gallery.length >= 2">
          <div (click)="appService.openLightbox(1, place.getAlbumGallery)" class="place-gallery-item">
            // It doesn't work
            <img [src]="place.gallery[1].file.sizes[0].thumb || place.gallery[1].file.thumb">
          </div>

          <div (click)="appService.openLightbox(2, place.getAlbumGallery)" class="place-gallery-item" *ngIf="place.gallery.length >= 3">
            <img [src]="place.gallery[2].file.thumb">
          </div>
        </div>
javascripthtmlangular


Solution 1:[1]

Try this:

<img [src]="place.gallery[0].file.sizes.length ? place.gallery[0].file.sizes[0].thumb : place.gallery[0].file.thumb">

What we are doing here:

place.gallery[0].file.sizes.length ? first check if the size array has elements (when the length is 0 JavaScript understands as a false statement. If it is greater than 0 we pick the first item which is the "size": "small" one, correct?

If the sizes array length is 0 we fallback to place.gallery[0].file.thumb

Helpfull links:

Everything Without a "Value" is False

Conditional (ternary) operator

What was wrong?

place.gallery[0].file.sizes[0].thumb || ... when you check like this, sizes[0] doesn't exist since sizes is an empty array, so it returns undefined and you can't read .thumb from undefined

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions