angular - 将图像从 api url 加载到 Angular 5 组件中

Question

我有一个 html 结构如下的组件:

<img mat-card-sm-image src="{{img}}" />

和 typescript

constructor(private loginService: LoginService) {
    this.img = null;
    this.loadImage();
  }

loadImage = function () {
   this.img = this.loginService.loginImg();
}

和登录服务:

loginImg() {
    const url = "http://localhost:59078/api/image/login";
    this.http.get(url, { responseType: 'blob' }).subscribe(result => {
      console.log(result);
      return result;
    });
}

和 API 核心 Controller

  [HttpGet]
  [AllowAnonymous]
  [Produces("image/png")]
  public IActionResult Login()
  {
     var file = Path.Combine(Directory.GetCurrentDirectory(),
                        "wwwroot", "images", "login.png");

     return PhysicalFile(file, "image/png");
  }

图像未加载的想法...为什么？

Answer 1

this.http.get(url, { responseType: 'blob' }).subscribe(result => {
  console.log(result);
  return result;
});

此处的 return 不执行任何操作(特别是因为您没有返回 http.get 本身)。该服务应该返回可观察的 http.get(不带订阅)，然后当您从组件订阅它时，您可以从内部更改 img 变量。

修复方法如下

public img: string;

constructor(private loginService: LoginService) {
  this.loadImage();
}

loadImage() {
  this.loginService.loginImg().subscribe(result => {
    this.img = result;
  });
}


# Login service:

loginImg() {
  const url = "http://localhost:59078/api/image/login";
  return this.http.get(url, { responseType: 'blob' });
}

这是不相关的，但您可能会考虑使用 Angular 生命周期钩子(Hook)(如 ngOnInit)而不是初始化变量的构造函数

constructor(private loginService: LoginService) { }

public ngOnInit(): void {
  this.loadImage();
}