diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 83a854be412bf6a9d669936607797c0f1e62a9d7..a15619f9e8f1c758a9b196a3af603217677e356c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -48,7 +48,7 @@ import { PrivacyBannerComponent } from './components/privacy-banner/privacy-bann import { ParserWarningComponent } from './components/parser-warning/parser-warning.component'; import { GroupWarningComponent } from './components/group-warning/group-warning.component'; import { NetworkWarningComponent } from './components/network-warning/network-warning.component'; -import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { SummaryNodeComponent } from './pages/explorer-page/summary-node/summary-node/summary-node.component'; import { NetworkOverviewComponent } from './pages/explorer-page/network-overview/network-overview/network-overview.component'; import { InfoTileEdgeComponent } from './components/info-tile-edge/info-tile-edge/info-tile-edge.component'; @@ -56,6 +56,7 @@ import { NetworkEmptyWarningComponent } from './components/network-empty-warning import { BugReportComponent } from './components/bug-report/bug-report.component'; import { ViewListComponent } from './components/analysis-panel/view-list/view-list.component'; import { ImageComponent } from './image/image.component'; +import { ImageFallbackDirective } from './directives/image-fallback/image-fallback.directive'; @NgModule({ @@ -101,6 +102,7 @@ import { ImageComponent } from './image/image.component'; BugReportComponent, ViewListComponent, ImageComponent, + ImageFallbackDirective, ], imports: [ BrowserModule, diff --git a/src/app/directives/image-fallback/image-fallback.directive.spec.ts b/src/app/directives/image-fallback/image-fallback.directive.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..bc5e23d0b707243e50a67e436d3cd1189637df58 --- /dev/null +++ b/src/app/directives/image-fallback/image-fallback.directive.spec.ts @@ -0,0 +1,8 @@ +import { ImageFallbackDirective } from './image-fallback.directive'; + +describe('ImageFallbackDirective', () => { + it('should create an instance', () => { + const directive = new ImageFallbackDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/directives/image-fallback/image-fallback.directive.ts b/src/app/directives/image-fallback/image-fallback.directive.ts new file mode 100644 index 0000000000000000000000000000000000000000..82d9e6d60e1f6c8d75b6c7c253dc161c0acff3a5 --- /dev/null +++ b/src/app/directives/image-fallback/image-fallback.directive.ts @@ -0,0 +1,20 @@ +import { Directive, Input, HostBinding, HostListener } from '@angular/core'; + +@Directive({ + selector: 'img[fallback]' +}) +export class ImageFallbackDirective { + + constructor() { } + + @Input() + @HostBinding('src') + src: string; + + @Input() fallback: string; + + @HostListener('error') + onError() { + this.src = this.fallback; + } +} \ No newline at end of file diff --git a/src/app/image/image.component.html b/src/app/image/image.component.html index 71b5958cf8172b364dd751336daef1fe34cf5098..d85317393808bcde34d96a343a4a4dc65088f0b7 100644 --- a/src/app/image/image.component.html +++ b/src/app/image/image.component.html @@ -1,9 +1,7 @@ -<picture> - <source srcset="{{ _source }}" /> - <img - src="{{ _source }}" - alt="{{ _alt }}" - title="{{ _title }}" - class="{{ _class }}" - /> -</picture> +<img + alt="{{ _alt }}" + title="{{ _title }}" + class="{{ _class }}" + src="{{ _source }}" + fallback="https://cdn.drugst.one/{{ version }}/assets/{{ _source }}" +/> diff --git a/src/app/image/image.component.ts b/src/app/image/image.component.ts index 1db83ad6cb33fee2dc4af80c34f5eb9824cd242d..41c72ab90e46eb920df50c3f6bc06124b89ea3aa 100644 --- a/src/app/image/image.component.ts +++ b/src/app/image/image.component.ts @@ -1,4 +1,5 @@ import { Component, Input, OnInit } from '@angular/core'; +import { version } from '../../version'; @Component({ selector: 'app-image', @@ -10,12 +11,10 @@ export class ImageComponent implements OnInit { constructor() { } public _source: string; - public format: string; + public version: string; @Input() set _src(src: string) { this._source = src; - // get file ending behind last '.' as format - this.format = this._source.split('.').slice(-1)[0]; } @Input() _alt: string; @@ -23,6 +22,7 @@ export class ImageComponent implements OnInit { @Input() _class: string; ngOnInit(): void { + this.version = version; } }