Angular2：如何处理异步图像（blob）请求？ [英] Angular2: How to handle a async image (blob) request?

问题描述

我正在尝试通过安全的api请求图像。目前我得到了以下工作（请参阅我在下面使用的所有资源。

I am trying to request a image via a secured api. At the moment I got the following to work (see all the resources I use below.

import { AssetsService } from '../../services/AssetsService';
import { Component } from '@angular/core';

@Component({
    templateUrl: 'home.html',
})
export class HomePage {

    public img;

    constructor(
        public assets_service: AssetsService
    ) { }

    public async ionViewDidEnter() {
        this.img = await this.assets_service.picture_request('test.png');
    }
}

我的观点

<img [src]="img | safe" />

现在我见过异步管道看起来很有希望。正如你可能的那样已经猜到了，我真的不想为我想要请求的每个图像使用viewmodel属性通过上面使用的api。

Now I've seen the async pipe that looks promising. As you might have guessed, I really don't want to use a viewmodel property for each of the image I want to request via the api like used above.

我想直接从html视图中使用异步调用 picture_request 。这将节省我在viewmodel中的所有管道。从我读过的东西看起来像这样的东西应该有效，但只有它不可悲。

I want to to use the async call picture_request straight from the html view. That will save me all the plumbing in the viewmodel. From what I've read somethings like something like this should work, but only it doesnt sadly.

<img [src]="assets_service.picture_request('test.png') | async | safe" />

我不确定我是否使用异步管道正确或使用正确的方法。如果我不是我的方法应该是什么？任何帮助表示赞赏。仅供参考：我使用角度2与离子2结合使用。

I am not sure if I am using the async pipe correctly or using the right approach. If I'm not what should my approach be? Any help is appreciated. FYI: I am using angular 2 in combination with ionic 2.

我的其他二手资源：

我的安全管道

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
    constructor(
        private sanitizer: DomSanitizer
    ) { }
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
} 

我的资产服务

import 'rxjs/Rx';
import { Headers, RequestOptions, ResponseContentType } from '@angular/http';
import { Injectable } from '@angular/core';
import { AppConfiguration } from '../app/AppConfiguration';
import { AuthHttp } from 'angular2-jwt';

@Injectable()
export class AssetsService {

    constructor(
        private auth_http: AuthHttp
    ) { }

    /**
     * Fetches a image by filename by filename and converts it to a blob/object url
     */ 
    public picture_request(filename: string) {
        return this.auth_http.post(AppConfiguration.base_url + 'assets/image',
            JSON.stringify({
                filename: filename
            }), 
            new RequestOptions({
                responseType: ResponseContentType.Blob,
                headers: new Headers({
                    'Content-Type': 'application/x-www-form-urlencoded'
                })
            })
            .map(res => res.blob())
            .map(blob => URL.createObjectURL(blob))
            .toPromise();
    }
}

推荐答案

我是找到了适合我的解决方案。我创建了一个自定义组件。

I've found a solution which worked for me. I created a custom component.

import { Component, Input } from '@angular/core';
import { AssetsService } from '../../services/AssetsService';

@Component({
    selector: 'async-image',
    template: `<img [src]="img | safe" />`
})
export class AsyncImageComponent {

    @Input() filename: string;
    public img: any;

    constructor(
        public assets_service: AssetsService
    ) { }

    public async ngOnInit(): Promise<void> {
       this.img = await this.assets_service.picture_request(this.filename);
    }
}

我可以这样使用。

<async-image filename="{{image.filename}}"></async-image>

这篇关于Angular2：如何处理异步图像（blob）请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！