Add example for image caching

[vytautas-pranskunas-]

Hello, I am trying to implement image caching on angular however there is no example how to do this. In general example view model is updated however in angular there is no view model and with OnPush I need to go with observables. However the app crashes. Plus then not sure when to use enableDownload and disabled onload functions. I asked question on stackoverflow.com but got no answer. Question with service example can be found here : https://stackoverflow.com/questions/61418403/how-to-implement-image-caching-in-nativescript-angular

Finally I am going to do pipe not service but is its same -

1. How to notify view about loaded images
2. Where to use enableDownload disableDownload if I have image Cache pipe or service

It would be super cool to get answers from you guys and improve docs because I feel stuck a little bit.

[vytautas-pranskunas-]

finally i was able to do image caching with observables but but there are some questions left:

1. is this.cache.enableDownload(); and this.cache.disableDownload(); are in right positions
2. for some reason, images are shown with big delay (after some random dom rerender), if i am not adding cd.detectChanges();

here is my pipe:

import { Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';
import { Cache } from 'tns-core-modules/ui/image-cache';
import { ImageSource, fromNativeSource } from 'tns-core-modules/image-source';
import { Observable } from 'rxjs';

@Pipe({
    name: 'fromCache',
    pure: true,
})
export class ImageCachePipe implements PipeTransform {
    private cache: Cache;

    constructor(private cd: ChangeDetectorRef) {
        this.cache = new Cache();
        this.cache.placeholder = ImageSource.fromFileSync('~/assets/images/temp-icon.jpg');
        this.cache.maxRequests = 10;
    }

    transform(url: string): any {
        this.cache.enableDownload();

        return new Observable(observer => {

            const imageFromCache = this.cache.get(url);

            if (imageFromCache) {
                observer.next(imageFromCache);
                observer.complete();
                this.cache.disableDownload();
                return;
            }

            observer.next(this.cache.placeholder);

            this.cache.push({
                key: url,
                url,
                completed: (image: any, key: string) => {
                    if (url === key) {
                        observer.next(new ImageSource(image));
                        observer.complete();
                        this.cache.disableDownload();
                        this.cd.detectChanges();
                    }
                }
            });

        });
    }
}

[alexgritton]

I'm also struggling with this. Whenever I return an observable I get this error. The method setNativeSource() expects UIImage instance.

I've simplified the transform method to this to try and pinpoint the problem.

transform(url: string): Observable<ImageSource> {
    return new Observable(observer => {
      var image = ImageSource.fromFileOrResourceSync('~/assets/images/rest-day-320.jpg');
      observer.next(image);
      observer.complete();
    });
}

If I return the ImageSource directly then it works as expected. Any help would be greatly appreciated. This is what the html looks like.

<Image [src]="day.thumbnailUrl | encodeUrl | imageCache" loadMode="async" class="card-left-image"  stretch="aspectFill">
</Image>

EDIT: I didn't know I had to add the async pipe after. After adding | async to the [src] everything works as expected.

[csimpi]

@NickIliev ? Why did nobody answer this basic support question at all?

[vytautas-pranskunas-]

Because this project is dead

On Tue, Mar 16, 2021, 6:59 PM Peter @.***> wrote:

@NickIliev https://github.com/NickIliev ? Why did nobody answer this basic support question at all?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/NativeScript/nativescript-angular/issues/2154#issuecomment-800484286, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA54ZF5XLZDPC7NDHAEGJ2DTD6L6FANCNFSM4MQTTWPA .