您可以从Angular项目中的资产文件夹中静态加载图像。您也可以从后端静态检索图像。您可以使用 bypassSecurityTrustResourceUrl

environment.ts

export const environment = {
  production: false,apiURL: 'http://localhost:8080/your-api/v1',imageUrl: '/assets/images/yourImage',};

component.html

<img [src]="imageUrl">

component.ts

photoUrl: SafeResourceUrl;
  ngOnInit() {
    this.urlService.siteProfile.subscribe(s => {
      this.siteProfile = s;
      if(s != null) {
        this.photoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.apiUrl}/image-directory/your-pic?id`);
      }
    });

使用属性绑定应该可以：

 <img [src]="imagePath">

，但是您也可以尝试字符串插值：

 <img src="{{imagePath}}">

您尝试过

<img [attr.src]="imagePath">

或者如果检测到变化是这里的问题：

this.imagePath$ = this.profileService.getImg().pipe(
  map(res => res['img']),);

<img [src]="imagePath$ | async">

您需要将文件从node.js服务器公开到前端。现在，听起来您只是将路径字符串公开给客户端，而不是文件本身。

您可以通过在服务器上定义一个static folder来保存所有静态文件，或通过使用res.sendFile公开特定文件（定义路径并转到要检索的任何文件夹）来进行此操作该文件。

使用静态文件夹：

// connect the avatars folder as the `/avatars` server sub path
app.use('/avatars',express.static('avatars'));

使用特定的res.sendFile：

app.get('/avatars/:name',function (req,res,next) {
  const fileName = req.params.name;
  res.sendFile(fileName,options,function (err) { /* ... */ });
});

取决于您的所有文件都位于一个位置还是用户将照片上传到私人位置，您需要使用其中一种方法将文件发送到浏览器，以便文件可以访问。 / p>

在我的系统中，我们使用图像src标签的servlet URL，该servlet从图像作品返回base64字符串没有任何问题。

您的贡献之后，我可以解决这个问题。 但是问题不在于前端，而在于后端。 但是，您的贡献极大地改善了我的代码，因此，我将把大家的功劳归功于我可以实施或遵循最终解决方案中的建议的人。

即使是我没有引用的人，我也非常感谢您抽出宝贵的时间来帮助我！

第一名。归功于 @HenryDev

  

您是否尝试过将图像类型放入URL？并检查你是否   能够看到图像？只需将其放入URl   本地主机：3000 / avatars / 5db84cdf4c6efe073864f9e7.jpeg告诉我们什么   你看

尝试之后，我开始认为后端出了点问题，因为尝试返回的是json而不是图像渲染。

第二名。归功于 @Thatkookooguy

  

使用特定的res.sendFile：

app.get('/avatars/:name',next) {   const fileName = req.params.name;  
res.sendFile(fileName,function (err) { /* ... */ }); });

在后端，我正在使用路由来查找具有相同路径'/avatars/:id'的化身保存在数据库中。因此，每次我尝试访问它时，优先级都是路由。

因此，当我尝试通过点击浏览器上的路径来访问图像时，它重新调整了json文件，而不是显示图像。

解决方案

因此，解决方案是替换路由来调用函数以获取图像列表！

但是，正如我告诉您的那样，我在这里有很多提示，这些提示使我有机会改进自己的代码：

第三名。归功于 @Ian Halfpenny

  

您可以使用Angular克服现有的安全性   绕过SecurityTrustResourceUrl

因此，我使用了bypassSecurityTrustResourceUrl替换了我的代码。

第四名。归功于 @dota2pro

  

使用* ngIf加载链接后显示图像。 （它是   编辑并删除。所以，很抱歉没有显示您的原始照片   贡献）   现在，我通过在*ngIf="avatar"

之前进行测试来在html中显示