时间戳

首页 > 解决方案 > 用管道加载的 img src 未知

angular - 用管道加载的 img src 未知

问题描述

我正在尝试使用管道加载 img src，我在控制台日志中看到了正确的结果，但图像的 src 仍然未知。

  1. 我正在从 firebase 加载一些数据，从那里我有 comment.email
  2. 之后使用管道，我使用 comment.email 来查找图像

这是我的代码：

<img [src]="comment.email | getImage">


   transform(value: string){
    this.firestore.getRegistration(value).subscribe(ressData => {
      const userAdditionalData = ressData.map(e => {
        return {
          id: e.payload.doc.id,
          ...e.payload.doc.data() as UserAdditionalInfo
        }
      })
      console.log(userAdditionalData[0].userImg);
      return userAdditionalData[0].userImg;
    })    
  }

我可以在控制台日志中看到结果，这是正确的 img url，但 img src 仍然未知。

标签： angular

解决方案

在您的管道中，您订阅了一个 observable 并从您的订阅中返回一个完全没有效果的值。你应该做的是从你的管道返回一个可观察的，并async在你的管道之后使用管道。

  transform(value: string){
  return   this.firestore.getRegistration(value).pipe(map (ressData => {
      const userAdditionalData = ressData.map(e => {
        return {
          id: e.payload.doc.id,
          ...e.payload.doc.data() as UserAdditionalInfo
        }
      })
      console.log(userAdditionalData[0].userImg);
      return userAdditionalData[0].userImg;
    }))    
  }

用法 ：

<img [src]="comment.email | getImage | async">

推荐阅读