Question

目标是通过创建图像标签并将从我的服务接收的URL传递到src attr来预览图像。当进行api调用时，我想在标头中传递不记名令牌。不知道我在想什么

我尝试过的事情

let url : string = "http://10.1.1.0:4201/path/sample.png" ;

let urlWithPipe : string = "http://10.1.1.0:4201/path/sample.png | authImage" ;

let imgToPreviewInDom = <img src="'${url}' | authImage:${url}" alt="image uploaded">
let imgToPreviewInDom = <img src="${url} | authImage" alt="image uploaded">
let imgToPreviewInDom = <img src="${urlWithPipe}" alt="image uploaded">
let imgToPreviewInDom = <img [src]="${urlWithPipe}" alt="image uploaded">-

给出[src]时没有请求发生

      @Pipe({
       name: 'authImage'
      })
    export class AuthImagePipe implements PipeTransform {

   constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

   transform(url): Observable<SafeUrl> {
    let token = 'Bearer token from service';

     let httpOptions = {
        headers: new HttpHeaders({
          Authorization:token
        })
      };
    let tempHeaders = Object.assign({}, httpOptions)        

    return this.http.get<any>(url, {...tempHeaders }).pipe(map((val:any) => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val))));
         
   }
   }

我面临的问题

在所有上述情况下，给定的管道与请求URl一起作为字符串例如，在2种情况下，请求网址如下

Request URL: https://xx.xx.xx.xxx:xxxx/my-service/attachmentName=sample.png&%20|%20authImage

我要实现的目标

在标头中将URL和承载令牌传递给src，以便检索图像数据并可以用HTML进行预览

发出将身份验证令牌传递给<img> src URL请求

0 个答案: