fix(img-src): correctly initialize fallback value (#986)

angular · Jan 13, 2019 · c1fc857 · c1fc857
1 parent 0eccec4
commit c1fc857
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/src/lib/extended/img-src/img-src.spec.ts b/src/lib/extended/img-src/img-src.spec.ts
@@ -237,6 +237,52 @@ describe('img-src directive', () => {
       }
     });
 
+    it('should work with responsive srcs, starting and ending with fallback', () => {
+      const defaultSrc = 'https://www.gstatic.com/webp/gallery2/1.png';
+      const xsSrc = 'https://www.gstatic.com/webp/gallery3/1.png';
+      componentWithTemplate(`
+        <img src="${defaultSrc}" src.xs="${xsSrc}">
+      `);
+      fixture.detectChanges();
+
+      let img = queryFor(fixture, 'img')[0];
+      let imgEl = img.nativeElement;
+      expect(imgEl).toBeDefined();
+      if (isPlatformServer(platformId)) {
+        expectEl(img).toHaveStyle({
+          'content': `url(${defaultSrc})`
+        }, styler);
+
+        matchMedia.activate('xs');
+        fixture.detectChanges();
+        expectEl(img).toHaveStyle({
+          'content': `url(${xsSrc})`
+        }, styler);
+
+        matchMedia.activate('lg');
+        fixture.detectChanges();
+        expectEl(img).toHaveStyle({
+          'content': `url(${defaultSrc})`
+        }, styler);
+      } else {
+        expect(imgEl).toHaveAttributes({
+          src: defaultSrc
+        });
+
+        matchMedia.activate('xs');
+        fixture.detectChanges();
+        expect(imgEl).toHaveAttributes({
+          src: xsSrc
+        });
+
+        matchMedia.activate('lg');
+        fixture.detectChanges();
+        expect(imgEl).toHaveAttributes({
+          src: defaultSrc
+        });
+      }
+    });
+
     it('should work if default [src] is not defined', () => {
       componentWithTemplate(`
          <img [src.md]="mdSrc">

diff --git a/src/lib/extended/img-src/img-src.ts b/src/lib/extended/img-src/img-src.ts
@@ -30,7 +30,7 @@ export class ImgSrcDirective extends BaseDirective2 {
   @Input('src')
   set src(val: string) {
     this.defaultSrc = val;
-    this.setValue('', this.defaultSrc);
+    this.setValue(this.defaultSrc, '');
   }
 
   constructor(protected elementRef: ElementRef,
@@ -41,7 +41,7 @@ export class ImgSrcDirective extends BaseDirective2 {
               @Inject(SERVER_TOKEN) protected serverModuleLoaded: boolean) {
     super(elementRef, styleBuilder, styler, marshal);
     this.init();
-    this.setValue('', this.nativeElement.getAttribute('src') || '');
+    this.setValue(this.nativeElement.getAttribute('src') || '', '');
     if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {
       this.nativeElement.setAttribute('src', '');
     }
@@ -55,12 +55,12 @@ export class ImgSrcDirective extends BaseDirective2 {
    * Do nothing to standard `<img src="">` usages, only when responsive
    * keys are present do we actually call `setAttribute()`
    */
-  protected updateWithValue() {
-    let url = this.activatedValue || this.defaultSrc;
+  protected updateWithValue(value?: string) {
+    const url = value || this.defaultSrc;
     if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {
       this.addStyles(url);
     } else {
-      this.nativeElement.setAttribute('src', String(url));
+      this.nativeElement.setAttribute('src', url);
     }
   }