Загрузить изображение из api url в угловую 5-компонентную - PullRequest
Новая
       4

Загрузить изображение из api url в угловую 5-компонентную

0 голосов
/ 29 апреля 2018

У меня есть компонент, который выглядит как структура 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 Core 

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

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

Идея, что изображение не загружается ... Почему?

1 Ответ

0 голосов
/ 29 апреля 2018 
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' });
}

это не связано, но вы можете рассмотреть возможность использования ловушки Anugular жизненного цикла, например ngOnInit вместо конструктора для инициализации переменных 

constructor(private loginService: LoginService) { }

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