用管道加载的 img src 未知

Question

我正在尝试使用管道加载 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 仍然未知。

Answer 1

在您的管道中，您订阅了一个 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">