diff --git a/src/lib/extended/img-src/img-src.spec.ts b/src/lib/extended/img-src/img-src.spec.ts
index a39d8580d..13483b083 100644
--- 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(`
+
+ `);
+ 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(`
diff --git a/src/lib/extended/img-src/img-src.ts b/src/lib/extended/img-src/img-src.ts
index 7aaf5cfa5..5c4b03505 100644
--- 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 `
` 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);
}
}