我试图从我的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是 "undefined",然后我的图片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)));
}
另外,这里有一个类似的问题: 如何在订阅里面返回值 Angular 4