需求
将图片的相对路径作为参数请求接口返回一个图片URL，这样直接放到img标签上面渲染图片，由此想到使用自定义管道的功能；
实现
// minio.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { lastValueFrom } from 'rxjs';
import { NzMessageService } from 'ng-zorro-antd/message';@Pipe({ name: 'minioFormat' })
export class MinioPipe implements PipeTransform {constructor(private http: _HttpClient, private msg: NzMessageService) {}async transform(value: string): Promise<string> {const res = await this.getMinioUrlPromise(value);if (res.ret === '-1') {this.msg.error(res.desc);return;}return res.data;}getMinioUrlPromise(fileUrl: string) {return lastValueFrom(this.http.post('/pc/sysservice/queryShareUrl', {obj: {fileUrl,},}),);}
}模板中使用：<img [src]=“item.ufmpFileUrl | minioFormat” alt=“” />
报错：http://localhost:4200/[object%20Promise] 404 (Not Found)，
原因: 因为他是异步的数据，只能在传递给 then() 方法的回调函数中访问已解决的值；
解决： 使用async管道，<img [src]=“item.ufmpFileUrl | minioFormat | async” alt=“” />
async 管道会订阅一个 Observable 或 Promise，并返回它发出的最近一个值。 当新值到来时，async 管道就会把该组件标记为需要进行变更检测。当组件被销毁时，async 管道就会自动取消订阅，以消除潜在的内存泄露问题。
)
