node.js - Angular - 从 API 中的 blob 绑定图像 url
问题描述
我正在尝试从我的 API 中获取 blob 图像并将其作为 img src 插入。
这是我的服务:
public download(fileName: string) {
this.http.get('http://x.x.x.x:4000/api/' + fileName, { responseType: 'blob'}).subscribe(res => {
console.log( "TEST 1: " + window.URL.createObjectURL(res) ) ;
return window.URL.createObjectURL(res);
});
}
这是我的 .ts 文件:
export class FileListComponent {
public pictureSrc;
public fileList$: Observable<string[]> = this.fileService.list();
constructor(private fileService: FileService) { }
public download(fileName: string): void {
console.log ("TEST 2: " + this.fileService.download(fileName));
this.pictureSrc = this.fileService.download(fileName);
}
和我的.html:
<img src="{{ pictureSrc }}">
当我运行它时,它会在 TEST 1 中获取正确的 blob url,但 TEST 2 是“未定义”,然后我的图像 src 也是如此。
知道为什么 url 不会从我的服务传输到我的 .ts 文件吗?
谢谢。
解决方案
是的,因为在订阅中返回了 URL。尝试这个:
public download(fileName: string) {
return this.http.get('http://x.x.x.x:4000/api/' + fileName, { responseType: 'blob'}).pipe(
map(res => window.URL.createObjectURL(res)));
}
此外,这里有一个类似的问题:How to return value inside subscribe Angular 4
推荐阅读
- r - 宽到长,有许多不同的列
- java - 从 java poi 4.1.2 中的 excel 表中读取国际货币符号
- r - ggplot2 stat 摘要均值问题 - 均值现在有一条振荡线 - 保存 data.frame 的问题?
- django - django - AbstractUser 属性消失了....?
- .net - 如何使 Nest Elasticsearch 不区分大小写
- laravel - 显示数据视图时处理空表
- javascript - Fabric.js 替换图像对象中的颜色
- json - 如何在 TypeScript 中使用 JSON 对象的值?
- php - 如何将 3 个表相互关联
- javascript - 如何在Javascript中制作like按钮?