Использовать пользовательский канал с динамическим URL-адресом изображения в теге image ionic 3 - PullRequest
Новая
       29

Использовать пользовательский канал с динамическим URL-адресом изображения в теге image ionic 3

0 голосов
/ 04 апреля 2019

Мне нужно установить заголовки аутентификации для изображений, вызываемых из тега изображения (<img>). Поэтому я создал трубу, используя ionic g pipe secureimages.

Это создает канал для перехвата перехватчика http, где я устанавливаю заголовок. Ниже мой пользовательский канал 

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';

/**
 * Generated class for the SecureImagesPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'secureimages',
})
export class SecureImagesPipe implements PipeTransform {
  constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

    transform(url): Observable<SafeUrl> {
        return this.http
            .get(url, { responseType: 'blob' })
            .map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
    }
}

и на перехватчике 

const headers = req.headers
  .set('Authorization', 'Bearer ' + token)
  .append('Content-Type', 'application/json');
const reqClone = req.clone({
  headers
});
return next.handle(reqClone);

И в теге изображения, 

<img  [attr.src]='{{this.imageURL}} | secureimages | async'/>

Но выдает ошибки компиляции. Но если я использую статический URL, он работает.

Как можно определить динамический URL-адрес изображения в теге изображения, чтобы он использовал предоставленный канал.

Ответы [ 2 ]

0 голосов
/ 04 апреля 2019

Нашел проблему и получил ответ.Как сказали авторы, трубы должны быть внутри фигурных скобок.Также динамическая переменная изображения должна быть инициализирована.В моем случае переменная была приведена к типу, но не инициализирована.При инициализации все работает.Спасибо.

0 голосов
/ 04 апреля 2019

Не следует использовать фигурные скобки, когда вы связываете атрибуты скобками []. 

<img  [attr.src]=" this.imageURL | secureimages  | async "/>

Надеюсь, это поможет

...