BASE64成像角2

Question

我正试图从角度为2的远程服务器显示图像.

在我的组件中,我有一个对象,它是一个"university_info"对象,是我的模型.

export class myClass
{
    university_info : university_info;
}
myFunction()
{
    this.university_info = new university_info(responseFromServer[image])
}

export class university_info
{
    imageBase64 : string
    constructor(image : string)
    {
        this.imageBase64 = image
    }
}

一切都很好.我得到base64图像,但当我尝试以这种方式在HTML中显示它时:

  <img [src]="'data:image/jpg;base64,'+university_info.imageBase64" />

这就是我得到的:

Answer 1

我觉得这个帖子缺乏具体的例子,这让我有些困难:

导入DomSanitizer:

import { DomSanitizer } from '@angular/platform-browser';

在构造函数中定义:

constructor(private _sanitizer: DomSanitizer) { }

清理要作为图像源传递的Base64字符串(使用trustResourceUrl):

this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' 
                 + toReturnImage.base64string);

绑定到HTML:

<img [src]="imagePath">

Answer 2

解决方案：'data:image/jpg;base64'像这样在您的图片标签中使用

<img src="{{'data:image/jpg;base64,' + imagePath}}" />

Answer 3

您可以尝试使用_sanitizer.bypassSecurityTrustUrl告诉角度src值是安全的.从角度看这个类:

class DomSanitizationService {
    sanitize(context: SecurityContext, value: any) : string
    bypassSecurityTrustHtml(value: string) : SafeHtml
    bypassSecurityTrustStyle(value: string) : SafeStyle
    bypassSecurityTrustScript(value: string) : SafeScript
    bypassSecurityTrustUrl(value: string) : SafeUrl
    bypassSecurityTrustResourceUrl(value: string) : SafeResourceUrl
}

并且是安全html的一个例子:

export class AppComponent  {

    private _htmlProperty: string = '<input type="text" name="name">';

    public get htmlProperty() : SafeHtml {
       return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
    }

    constructor(private _sanitizer: DomSanitizationService){}
}

Answer 4

请在附件中找到有关如何在Angular 2/4中的Base64中上传图像及其显示的正确示例.实际的base64字符串被转储到调试器控制台中,当然也可以存储在数据库等中.

import { Component, OnInit } from '@angular/core';
// Base 64 IMage display issues with unsafe image
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-test',
  template: `
            <h1>Test 001 </h1>

          <div class="form-group">
            <label>Image</label>
            <input type="file" class="form-control" accept="application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
            text/plain, application/pdf, image/*" (change)="changeListener($event)">
          </div>

          <img *ngIf="base64Image" [src]="domSanitizer.bypassSecurityTrustUrl(base64Image)" />
    `,
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  private base64Image: string;

  constructor(private domSanitizer: DomSanitizer) { }

  ngOnInit() {
  }

  changeListener($event): void {
    this.readThis($event.target);
  }

  readThis(inputValue: any): void {
    var file: File = inputValue.files[0];
    var myReader: FileReader = new FileReader();

    myReader.onloadend = (e) => {
      this.base64Image = myReader.result;
      console.log(this.base64Image);
    }
    myReader.readAsDataURL(file);
  }

}

Answer 5

您必须确保它university_info.imageBase64是字符串类型，然后您的代码才能工作。

演示：http : //plnkr.co/edit/pI35tx9gXZFO1sXj9Obm?p=preview

import {Component,ViewChild,Renderer,ElementRef,ContentChildren} from '@angular/core';

@Component({
  selector: 'my-app',

  template:   `
  <img [src]="'data:image/jpg;base64,'+imagePath"/> 
  `

})
export class App {
  imagePath:string="iVBORw0KG...";
}