[英]unable to load image file from server in angular
i am sending an image file named figure.png from flask api and it is working fine.我正在从 flask api 发送一个名为 figure.png 的图像文件,它工作正常。 i have checked it in postman.
我已经在 postman 中检查过了。 now here is the angular code -> chart-component.ts->
现在这里是 angular 代码 -> chart-component.ts->
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-bar-chart2',
templateUrl: './bar-chart2.component.html',
styleUrls: ['./bar-chart2.component.css']
})
export class BarChart2Component implements OnInit {
imgsrc!: Observable<any>;
uploadApiUrl = "http://127.0.0.1:5000/graph"
getimage(){
this.imgsrc = this.http.get(this.uploadApiUrl)
console.log("imgsrc: " + this.imgsrc)
}
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.getimage()
}
}
the html code-> html 代码->
<p>Min-Max analysis</p>
<img src={{imgsrc}} alt="no image" id="barChart2" style="position: relative; height:60vh; width:120vw">
the image does not load.图像不加载。
console window->控制台窗口->
imgsrc: [object Object]
GET http://localhost:4200/[object%20Object] 404 (Not Found)
can someone help with whats going on?有人可以帮忙看看发生了什么吗?
this.http.get
returns an Observable
and img
tag expects a string as src
. this.http.get
返回一个Observable
并且img
标签需要一个字符串作为src
。
You need to accept the Blob
from the API, create a URL from that blob, and then pass it as src
to your img
tag.您需要接受来自 API 的
Blob
,从该 Blob 创建一个 URL,然后将其作为src
传递给您的img
标签。 Something like:就像是:
imgsrc!: string;
sub!: Subscription;
uploadApiUrl = "http://127.0.0.1:5000/graph"
constructor(private http: HttpClient) { }
getimage(){
this.sub = this.http.get(this.uploadApiUrl, {
headers: { 'Content-Type': 'application/octet-stream'},
responseType: 'blob'
}).subscribe((src) => {
// Get the blob
const reader = new FileReader();
reader.readAsDataURL(src);
reader.onloadend = function() {
// result includes identifier 'data:image/png;base64,' plus the base64 data
this.imgsrc = reader.result;
}
});
}
ngOnInit(): void {
this.getimage()
}
ngOnDestroy(): void {
this.sub.unsubscribe();
}
HTML: HTML:
<p>Min-Max analysis</p>
<ng-container *ngIf="imgsrc">
<img src={{imgsrc}} alt="no image" id="barChart2" style="position: relative; height:60vh; width:120vw">
</ng-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.