Fallback image loading in figure tag

Question

I am creating an image gallery with a list of images using Angular 4.3.0. Images are loaded as background images in figure tags. Not in img tags. The image list is resized to a smaller dimension and those are used to populate the gallery. In case the resized image is not available, the use case is to load the original image.

If original image is not available, no-image.png/jpg will be loaded. I have seen solutions where angular directive is created to handle image load failure in src attribute of img tags. At this moment, I cannot change figure tags to img tags too due to design and time constraints. What I did was as follows.

<figure [ngStyle]="{'background-image':
                      'url(' + resizedImages[i] + '), 
                       url(' + originalImages[i] + '), 
                       url(' + noImageUrl + ')'}" 
></figure>

The problem with this is if all 3 images are available, they all are loaded. So, if there are 20 images, there will be 60 image load calls. What I want to achieve is to load the original image and no-image only if the resized image is not available. Similarly, also to load the no-image only if both the resized image and original image are not available.

Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Dec 17 '18 at 08:37
Have you tried to use a function? Like [ngStyle]="getBgUrl()" — Augustin R, Dec 17 '18 at 12:15
Actually no @AugustinR. Even if we use a function is there a way to check whether the image is available or not in the specified location? — Thilina Samiddhi, Dec 17 '18 at 12:39
You could use [this](https://stackoverflow.com/a/47283923/10122791) trick. — Augustin R, Dec 17 '18 at 12:42
@AugustinR Thank u :). I just tested with a small project. It's very helpful. I think I will be able to use that solution. I'll try this. — Thilina Samiddhi, Dec 17 '18 at 13:10

score 0 · Answer 1 · answered Dec 17 '18 at 14:12

I was able to implement a solution which uses the technique mentioned in the following post as pointed out by @AugustinR. how can i check if image exists in assets folder using angular 4

What I did was, filter the image list for availability using this technique and used the filtered image url list in DOM to display the images.

It worked for me. Glad to hear if there's a better answer too.

Fallback image loading in figure tag

1 Answers1