当试图获得多个图像时,角度可观察抛出错误,状态代码为200



问题描述

我在从postgreSQL数据库中获取多个图像并将其显示在前端时遇到了问题。图像作为二进制数据存储在postgreSQL中。如果我运行express代码,我会以json格式将图像数据作为缓冲区返回。当我运行代码时,我收到了一个200状态代码,但observable最终执行了handleError函数。在这里你可以看到我的控制台-->控制台

我的目标

我想从一个房子里获得多个图像,显示在我的前端模态页面上,这些图像存储在数据库中的一个单独的表中。使用postgreSQL数据库中的这个查询("select * from housee.houses_images where straatnaam = $1 AND straatnr = $2 AND postcode = $3",),我可以获得正确的图像。在我得到所有的图像后,我想在离子img标签中显示它们(来自离子框架(

代码信息

因此,我使用的是postgresSQL数据库,其后端使用express.js库,前端使用Angular

这是我在postgreSQL中的表-->表postgreSQL

在我的后端index.js文件中,我有以下代码

app.get(
"/getMarkerPhotos/:straatnaam/:straatnr/:postcode",
function (req, res) {
client.query(
"select * from housee.houses_images where straatnaam = $1 AND straatnr = $2 AND postcode = $3",
[req.params.straatnaam, req.params.straatnr, req.params.postcode],
function (err, data) {
if (err != null) {
res.sendStatus(500);
} else {
res.sendStatus(200);
}
}
);
}
);

后端的调用正在工作,因为如果我在poster中运行它,它会以JSON格式返回我的数据-->邮递员

在前端,在我的api.service.ts文件中,我创建了这个函数

getMarkerPhotos(straatnaam: any, straatnr: any, postcode: any): Observable<any> {
var result = this.http.get(this.url + '/getMarkerPhotos/' + straatnaam + '/' + straatnr + '/' + postcode)
.pipe(
catchError(this.handleError)
);
console.log(result)
return result
}
<--other code-->
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.log(error.error.message)
} else {
console.log(error.status)
}
return throwError(
console.log('Something is wrong!'));
};

在我的模态页面(makermodal.components.ts(上,我想显示数据库中的图像,我有这个代码

ngOnInit() {
this.getMarkerPhotos();
}
getMarkerPhotos() {
this.api.getMarkerPhotos(this.straatnaam, this.straatnr, this.postcode).subscribe(
data => {
console.log(data)
//this.photos.push(data)
//console.log(this.photos)
},
error => {
console.log("Subscribe error: " + error)
}
);
}

我希望有人能帮我。提前感谢!

更新了index.js

app.get(
"/getMarkerPhotos/:straatnaam/:straatnr/:postcode",
function (req, res) {
client.query(
"select * from housee.houses_images where straatnaam = $1 AND straatnr = $2 AND postcode = $3",
[req.params.straatnaam, req.params.straatnr, req.params.postcode],
function (err, data) {
if (err != null) {
res.sendStatus(500);
} else {
res.send({data});
}
}
);
}
);

最新更新