Fix bug when ngChanges is getting the same lowRes with different hiRes

projects/ngx-picture/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mralexandernickel/ngx-picture",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "publishConfig": {
     "access": "public"
   },

projects/ngx-picture/src/lib/images.mock.spec.ts

@@ -3,6 +3,10 @@ const svgImages = ['components', 'augury', 'animations', 'cli', 'compiler'];
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 const widths = [200, 300, 400, 500, 600];
 
+export function getRandomArrayItem<T>(array: T[]): T {
+  return array[Math.floor(Math.random() * array.length)];
+}
+
 export function generateSvgUrl(image: string): string {
   return `https://angular.io/generated/images/marketing/concept-icons/${image}.svg`;
 }
@@ -28,7 +32,7 @@ export function createImages(numImages: number = 20): any[] {
     for (let index = 0; index < sizes.length; index++) {
       const size = sizes[index];
       const width = widths[index];
-      const placeimgCategory = placeimgCategories[index];
+      const placeimgCategory = getRandomArrayItem(placeimgCategories);
       const svgImage = svgImages[index];
       data[size] = {
         hiRes: {

projects/ngx-picture/src/lib/ngx-picture.component.ts

@@ -88,7 +88,6 @@ export class NgxPictureComponent
   }
 
   public isSingleSrc(): boolean {
-    // debugger;
     return this.images.constructor === String;
   }
 
@@ -184,7 +183,6 @@ export class NgxPictureComponent
       imageConstructor = Image;
     }
     const currentImage = this.getCurrentImage();
-    // console.log('### currentIMage', currentImage);
     this.hiResLoaded = false;
 
     // If hiRes is already cached -> emit and return
@@ -198,13 +196,15 @@ export class NgxPictureComponent
     }
 
     // If lowRes is already cached -> emit and return
+    let lowResAlreadyCached = false;
     if (
       'lowRes' in currentImage &&
       typeof currentImage.lowRes.src === 'string' &&
       this.cacheService.get(currentImage.lowRes.src)
     ) {
-      this.emitImage(currentImage.lowRes, true);
-      return;
+      lowResAlreadyCached = true;
+      const isFinal = !currentImage.hiRes;
+      this.emitImage(currentImage.lowRes, isFinal);
     }
 
     // If src is already cached -> emit and return
@@ -219,7 +219,9 @@ export class NgxPictureComponent
 
     // reset to fallbackImage during loading
     // this.loadImage(this.fallbackImage, imageConstructor, false);
-    this.emitImage(this.fallbackImage, false);
+    if (!lowResAlreadyCached) {
+      this.emitImage(this.fallbackImage, false);
+    }
 
     // currentImage has only one src attribute (now lowRes/hiRes)
     if ('src' in currentImage) {
@@ -228,7 +230,7 @@ export class NgxPictureComponent
     }
 
     // currentImage has a low-resolution version
-    if (currentImage.lowRes) {
+    if (currentImage.lowRes && !lowResAlreadyCached) {
       const isFinal = !currentImage.hiRes;
       this.loadImage(currentImage.lowRes, imageConstructor, isFinal);
       // stop if currentImage has no high-resolution version
@@ -264,6 +266,7 @@ export class NgxPictureComponent
 
   public ngOnInit(): INgxImage {
     let initialImage = this.fallbackImage;
+
     if (!this.isBrowser()) {
       if (
         this.images[this.currentSize] &&

src/app/app.component.html

@@ -1,5 +1,7 @@
+<button (click)="updateImages()">Update Images</button>
+
 <ul>
-  <li *ngFor="let item of items">
+  <li *ngFor="let item of items; trackBy: trackByFn">
     <lib-ngx-picture
       [images]="item"
       [fallbackImage]="fallbackImage"

src/app/app.component.ts

@@ -25,4 +25,14 @@ export class AppComponent implements OnInit {
   constructor(private sanitizer: DomSanitizer) {}
 
   public ngOnInit(): void {}
+
+  public updateImages(): void {
+    for (let index = 0; index < this.items.length; index++) {
+      this.items[index] = createImages(1)[0];
+    }
+  }
+
+  public trackByFn(index: number, item: any): number {
+    return index;
+  }
 }