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

Вы может попытаться использовать _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 2

Вы должны убедиться, что university_info.imageBase64 типа строки тогда код будет Работа.

DEMO: 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..."; 
} 

Answer 3

Этот вопрос получает высокий рейтинг в Google, так что я думал, что я положил мои выводы здесь. Использование привязки данных для установки свойства изображения [src] может быть проблематичным, особенно на некоторых старых мобильных устройствах. Так что если у вас есть проблемы с производительностью дезинфицирующее + связывание подхода вы должны установить свойство Src, используя DOM непосредственно:

constructor(private el: ElementRef) {} 

... 

public imageChanged(base64: string) { 
    const im: HTMLImageElement = this.el.nativeElement.querySelector('#imgid'); 
    im.src = data; 
} 

Это может быть некрасивым, но его молниеносно.

Answer 4

Я чувствую эту тему не хватает конкретных примеров, которые заставили меня есть некоторые трудности:

Импорт DomSanitizer в конструкторе:

constructor(private _sanitizer: DomSanitizer) { } 

дезинфицировать строку Base64 вы хотите передать в качестве источника изображения (использование trustResourceUrl):

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

Привязка к HTML:

<img [src]="imagePath"> 

Answer 5

Я хотел бы предложить альтернативное решение, основанное на том, которое предоставляется @gatapia.

Предлагаемое решение заключается в использовании тега декоратора @ViewChild (см. Docs здесь https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html), чтобы получить ссылку на элемент в компоненте и установить значение непосредственно, как показано в фрагменте кода ниже.Важно отметить, что элемент, на который ссылается через ViewChild, должен быть связан с локальной переменной с помощью #, как показано в приведенном ниже коде.

Также, как объясняют документы ElementRef, использование ElementRef по-прежнему подвергает риску XSS также присутствовать при использовании DomSanitizer.

@Component({ 
    template: ` 
    <div> 
     <img #imgRef> // Note that the #imgRef reference is required to be identified by Angular 
    </div> 
    `, 
}) 
export class MyComponent implements OnInit { 
    src:string; 
    @ViewChild('imgRef') img:ElementRef; 

    constructor() { 
    // In your case, this will be resolved from the server 
    this.src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo='; 
    } 

    ngOnInit() { 
    // Sets the value of the element 
    this.img.nativeElement.src = this.src; 
    } 
} 

Следующая plunkr предоставляет рабочий фрагмент кода приведенного выше https://plnkr.co/edit/JXf25Pv8LqrFLhrw2Eum?p=preview

Answer 6

Пожалуйста Прилагаю правильный пример того, как загрузить изображение в Base64 в угловых 2/4, а также его отображения. фактическая строка 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); 
    } 

}