使用Angular 7 [src]属性获取404空错误

Question

我正在尝试使用Angular应用程序中的[src]属性加载图像。当我直接加载图像时，图像内容在外部呈现良好。但是，使用该应用程序，我会看到404空错误。

HTML-

<span class="pull-right">
        <img
          [src]="sampleImage"
          alt="{{ user.firebaseuser.displayName }}"
          class="img-responsive"
          style="max-height: 50px;">
</span>

组件类-

export class UserItemComponent implements OnInit {
  @Input() user: any;
  // @Input() index: number;

  sampleImage = 'https://americana-group.com/app/uploads/2017/11/koki1920x960-1048x524.jpg';
  constructor() { }

  ngOnInit() {
  }
}

错误详细信息-

http://localhost:4200/null 404 (Not Found)

我在这里想念什么？

Answer 1

改为使用[attr.src]="..."。如果该值为null，则不会添加src，并且将阻止localhost调用null。