代码之家 › 专栏 › 技术社区 › Snake Eyes

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

.net-core angular

Snake Eyes · 技术社区 · 8 年前

我有一个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核心控制器

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

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

图像未加载的想法。。。为什么?

1 回复 | 直到 8 年前

MilesStanfield 6 年前

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

这个 return 这里什么都不做(尤其是因为您没有返回http.get本身)。服务应该返回可观察的http。获取(没有订阅),然后当您从组件订阅它时,您可以更改 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 而不是初始化变量的构造函数

constructor(private loginService: LoginService) { }

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

推荐文章

realmikep · `Github Actions工作流中的git commit`失败:未授予对存储库的写入访问权限,403

1 年前

Erik Westwig · 使用反射调用程序集中的方法,该程序集中包含来自另一个程序集中基类的派生类

1 年前

Andrus · 如何从syslog中删除计算机和进程名称以及进程ID

1 年前

Escher · 如何将记录成员存储为uint,但将其呈现为DateTIme?

1 年前

Guillermo Espert · 无法在系统中实现INNotifyProperty。反思。Emit

1 年前

javad rabbani · 在ASP.NET中有一个助手类的最佳实践是什么。NET Core可以在所有视图中使用吗?[关闭]

1 年前

Vasu V · 将foreach转换为select语句

1 年前

Inglonias · 初始化集合的语法是什么?

2 年前

Alexander Zeitler · 将字典<string,string>绑定到配置节不起作用

2 年前

watkipet · 如何使用System将布尔标志选项添加到命令中。命令行?

2 年前