Вы можете поднять ответ, который вы использовали
аюсь сделать простую директиву. Когда изображение загружается, img src будет установлен на@Input()
строковое поле. При загрузке изображение будет установлено в исходное значение src (или, по крайней мере, как я пытаюсь это реализовать).
Я использовал ответ здесь:https://stackoverflow.com/a/38837619/843443 но это не директива, и поэтому потребует ряда изменений везде, где я использую изображения.
Моя первая попытка:
Погрузочно-img.directive.ts:
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[tohLoadingImg]'
})
export class LoadingImgDirective {
imgSrc: String;
@Input()
spinnerSrc: String;
constructor(private el: ElementRef) {
this.imgSrc = el.nativeElement.src;
el.nativeElement.src = this.spinnerSrc;
}
@HostListener('load') onLoad() {
this.el.nativeElement.src = this.imgSrc;
}
}
от:
<img src="{{hero.imgUrl}}" alt="Random first slide">
чтобы:
<img src="{{hero.imgUrl}}" alt="Random first slide" [tohLoadingImg]="'/assets/ring.svg'">
Ошибка:
Can't bind to 'tohLoadingImg' since it isn't a known property of 'img'. (".imgUrl}}" alt="Random first slide">-->
Что мне не хватает?