我有一个 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");
}
图像未加载的想法......为什么?
this.http.get(url, { responseType: 'blob' }).subscribe(result => {
console.log(result);
return result;
});
the 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 生命周期钩子,例如ngOnInit
而不是初始化变量的构造函数
constructor(private loginService: LoginService) { }
public ngOnInit(): void {
this.loadImage();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)