Node.js 从后端api获取图像并以角度显示

我想在angularV10中显示图像，并从后端获取它，我不知道为什么图像不显示，并得到错误，我正在寻找如何解决，但我没有得到答案 请有人给我引路好吗

后端：

get\u image:async（请求、恢复、下一步）=>{
Image.findAll（）.then（数据=>{
res.send（数据）
}) }

api:

router.get（“/get\u image”，uploadController.get\u image）

前端角度：service.ts

get_file（）：可观察{
返回this.http.get（baseUrl+'/get_image'，{responseType:'Blob'作为'json'}）}

代码：

createImageFromBlob（图像：Blob）{
let reader=new FileReader（）；
reader.addEventListener（“加载”，（）=>{
this.imageToShow=reader.result；没有太多细节，但希望我至少能为您澄清一些事情，以便您能够更好地找到解决问题的立足点

您不理解的很多字符是图像的base64编码字符串（如果您的代码正在生成图像，至少是适当的）

您希望显示为图像的是一个，它看起来很像您所显示的：

data:image/jpeg;base64,[a lot of characters]

unsafe:data:application/json;base64, ..... alot of chars i don't under stand 

根据实际的图像类型，它可能不是
image/jpeg
，可能是
image/png
，等等

你展示的最后一块有两个问题：

data:image/jpeg;base64,[a lot of characters]

unsafe:data:application/json;base64, ..... alot of chars i don't under stand 

第一个，现在已经告诉您它应该是什么样子，它认为数据是
application/json
，而不是预期的
image/xyz
。因此您构建数据URI的过程在某些地方是错误的。
我怀疑这就是你在说的blob类型应该是json（因此，
application/json
）：

然后，您的模板将使用
safeImage
：

<img [src]="safeImage"/>

然后，不要使用
*ngFor
ing原始图像本身，而是通过
safeImages
数组执行此操作：

<div *ngFor="let safeUrl of safeImages">
  <img [src]="safeUrl">
</div>

好，任何人对任何文件图像使用blob pdf都不好

我做的最好的解决方案是将图像上传到后端并生成URL

如果您使用node.js，本网站会很有帮助，谢谢您的回复…您的代码对一个图像很好，但我在表中有很多我可以做的事情？在后端，我编写image.findAll（），这意味着我使用了*ngFor，但我得到了以下错误：错误：找不到不同的支持对象的安全值必须使用[property]=binding:[object Blob]（见附件）“类型为”“object”“。NgFor仅支持绑定到数组之类的Iterables。基本上，您首先需要处理如何获取这些多个图像，并将它们放入一个可以迭代的数组中。如果这些图像恰好只是您获取的数据列表的一部分，您可以始终点击一个方法来执行此操作
，然后使用at方法只需
返回此.sanitizer.bypassSecurityTrustUrl（图像）；
this.rawImages = data; // Wherever your images come from, and if you want to keep them...

this.safeImages = [];
this.rawImages.forEach((img) => {
  this.safeImages.push(this.sanitizer.bypassSecurityTrustUrl(img));
});

<div *ngFor="let safeUrl of safeImages">
  <img [src]="safeUrl">
</div>