Angular 无法从函数中加载img src

我有一些图像存储在我的后端，它们受到身份验证的保护

我的应用程序设置了一个http拦截器，以便在登录后使用令牌调用我的后端

我尝试了以下代码在页面加载后加载图像，但遇到了一些问题：

html:

控制台输出：

网络选项卡：

---

这里有多个问题

如果

示例[“文件名”]

表示对象的属性，为什么属性名中会有空格

如果不控制更改检测策略，则可能会多次触发将函数绑定到属性（

[src]

）

如果您试图绑定一个可观察对象（

this.http.get（）

此处），则需要使用

async

管道：

[src]='loadImage（示例[“文件名]）|async'

。我不宽恕这种说法

更好的方法是修改控制器中的对象以添加URL并直接使用它们

控制器

示例=[
{名称：'sample'，标题：'sample'，…}，
{名称：'sample'，标题：'sample'，…}，
{名称：'sample'，标题：'sample'，…}，
...
];
恩戈尼尼特（）{
this.example.forEach（项=>{
item['url']=this.apirl+'/images/'+item['name']；
});
}

模板

{{image['Caption']}

如果您正在设置图像URL，它不应该只是

返回URL？将Ajax调用传递到图像的src属性没有意义。@GuyIncognito我不想设置URL，我已经有了-我需要使用Angulars http客户端加载图像，以便它在图像请求中使用我的应用程序身份验证令牌。当然，但将Ajax请求放入src属性仍然没有意义。您必须先将结果转换为base64。啊，好的。。我尝试了这里列出的答案，但没有任何运气：感谢您的回复-空格是正确的，它来自一个带有空格的JSON键。我不能直接使用URL，因为它会绕过我的http拦截器，该拦截器包含加载图像所需的令牌。@TomSelleck:在这种情况下，如果此解决方案有帮助，请尝试：
<img [src]='loadImage(example["File Name"])'/>
<figcaption>{{example['Caption']}}</figcaption>

loadImage(imgFileName)
{
  console.log("Load Image");

  let url = `${this.apiUrl}/images/${imgFileName}`;

  console.log(url);

  return this.httpClient.get(url);
}