Question

我有一个html结构的组件：

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

和打字稿

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核心控制器

  [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 iteself）。服务应返回可观察的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' });
}

这是不相关的，但您可以考虑使用像ngOnInit这样的Anugular生命周期钩子而不是用于初始化变量的构造函数

constructor(private loginService: LoginService) { }

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

将图像从api url加载到角度5组件中

1 个答案: