I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being used in the gallery. In cases where the resized image is unavailable, the original image should be loaded.
If the original image is also unavailable, a default placeholder image such as no-image.png/jpg will be displayed. While I've come across solutions involving creating an Angular directive to handle image loading failures within the src attribute of img tags, I am unable to switch from figure to img due to design constraints and time limitations at the moment. Here's what I've done so far:
<figure [ngStyle]="{'background-image':
'url(' + resizedImages[i] + '),
url(' + originalImages[i] + '),
url(' + noImageUrl + ')'}"
></figure>
The issue with this approach is that if all three images are available, they all get loaded simultaneously. This means that for every set of 20 images, there are 60 image load calls made. My goal is to only load the original image and placeholder image if the resized image is missing. Similarly, the placeholder image should only be loaded in case both the resized and original images are not available.