小编use*_*595的帖子

angular2显示base64图像

我正在尝试将来自服务器的图像显示为base64字符串.http和服务器的详细信息对我的问题并不重要(基本上,它可以工作).我有这个代码不起作用; 即我看到组件中的所有数据,但屏幕上没有显示图像.

服务:

import { Injectable } from 'angular2/core'
import {Observable} from 'rxjs/Observable';
@Injectable()
export class ImageService {
    constructor() {
    }
    public getImage(): Observable<string> {
        return Observable.create(imageData);
    }
}
const imageData: string = "iVBORw0KGgoAAAANSUhE...";
Run Code Online (Sandbox Code Playgroud)

组件:

import { Component } from 'angular2/core';
import { ImageService } from './service'
@Component({
    selector: 'my-app',
    template: '<div><img [src]="data:image/PNG;base64,{{imageContent}}"> </div>',
    providers: [ImageService]
})
export class AppComponent {
private imageContent: string = "";
    constructor(imageService: ImageService) {
        imageService.getImage().subscribe(response => {
            this.imageContent = response;
        });
    }
}
Run Code Online (Sandbox Code Playgroud)

如前所述,代码不起作用.我得到的不是支持屏幕上的图像:评价不支持报价!

我会很感激这个简单问题的一个有效例子.

base64 image angular

4
推荐指数
1
解决办法
2万
查看次数

标签 统计

angular ×1

base64 ×1

image ×1