Angular 5 将 baseURI 添加到图像 src 并且无法动态加载图像

Question

我在 angular 5.2.1 上工作，我想加载一个 src 来自服务器的图像

HTML

<img #image [src]="cover" class="img-fluid" alt="NO image">

图片加载器.component.ts

     import { Component, OnInit, Input, AfterViewInit,ViewChild,ElementRef} from '@angular/core';
    import { EventAccessService } from '../../../event/services/event-acces.service';

    @Component({
      selector: 'loader',
      templateUrl: './loader.component.html',
      styleUrls: ['./loader.component.scss']
    })
    export class EventCardComponent implements OnInit, AfterViewInit {
      @Input('cover') cover: any;

    @ViewChild("image", {read: ElementRef}) image: ElementRef;

      constructor(private service: EventAccessService) {

      }
    ngOnInit() {}
     ngAfterViewInit() {

        console.log(this.image.nativeElement.currentSrc);
        this.image.nativeElement.src=this.cover
        console.log(this.image.nativeElement.src);
    }
}

Chrome 控制台的结果: http://localhost:4200/(which是 baseURI)连接到变量 cover(这是图像的完整链接)

因此图片无法加载

请帮忙!!

编辑

我直接在 ngAfterViewInit 中将 image.nativeElement.src 更改为 cover 但仍然没有变化

Answer 1

我在这里使用了 RxjS:也就是说，您可以将来自服务器的图像 URL 放入 BehaviorSubject 中，如下所示。

.html

<img [src]="photoHandlerService?.userProfilePhotoChanged$ | async" #userProfilePhoto>

.ts

 @ViewChild('userProfilePhoto') userProfilePhoto: ElementRef;

 constructor(public photoHandlerService: PhotoHandlerService) { }

  ngAfterViewInit(): void {
    console.log(this.userProfilePhoto.nativeElement.src);
  }

service.ts

 private profilePhoto: string = 'assets/images/jpgs/profilePhoto.jpg';
 private userProfilePhotoSubject$: BehaviorSubject<string> = new BehaviorSubject<string>(this.profilePhoto);
 userProfilePhotoChanged$: Observable<string> = this.userProfilePhotoSubject$.asObservable();

 constructor()

setUserProfilePhoto(photoUrl: string): void {
    this.userProfilePhotoSubject$.next(photoUrl);
}