отображение встроенного изображения в angular2

Question

Я работаю над проектом в угловом2, который включает загрузку изображения из базы данных напрямую (с кодировкой base64). В угловом 1 можно просто загрузить его следующим образом:

<img data-ng-src="data:image/jpg;base64,{{entry.img}}" /> 

где entry.img - это данные необработанного изображения. Однако я не знаю, как это сделать в угловом2. Я пробовал

<img [src]="data:image/jpg;base64,{{entry.img}}" /> 

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

Answer 1

Может быть, вы могли бы попробовать это:

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

при условии, что entry является свойством компонента и содержит атрибут img.

Answer 2

Я использовал <img [attr.src]="image.base64"> где моя модель выглядит следующим образом

export class ImageModel { 
    public alt:string = ""; 
    public name:string = ""; 
    public base64:string =''; 
} 

, но версия @Thierry работает также. Я прикрепляю часть компонента и часть html. Может быть, вы можете улучшить свое решение или улучшить мое :)

HTML

<div class="row"> 
    <div class="col-xs-12"> 
     <p class="f-500 c-black m-b-20">Image Preview</p> 

     <div class="fileinput fileinput-new" [ngClass]="{'fileinput-exists': fileExists(), 'fileinput-new': !fileExists()}"> 
      <div class="fileinput-preview thumbnail"> 
       <img *ngIf="fileExists()" [attr.src]="image.base64"> 
      </div> 
      <div> 
       <span class="btn btn-info btn-file"> 
        <span class="fileinput-new">Select image</span> 
        <span class="fileinput-exists">Change</span> 
        <input type="file" #fileInp (change)="onFileChange($event)" name="file"> 
       </span> 
       <a href="#" class="btn btn-danger fileinput-exists" (click)="clearImage($event)">Remove</a> 
      </div> 
     </div> 
    </div> 
</div> 

Компонент

///<reference path="../../../../../typings/tsd.d.ts"/> 

import {Component, OnInit} from 'angular2/core' 
import {Router} from 'angular2/router'; 
import {NgClass} from 'angular2/common'; 

import {ImageInterface} from './image.interface' 
import {ImageService} from './image.service' 
import {ImageModel as Image} from './image.model' 

import {ImageComponent} from './image.component' 

@Component({ 
    selector: 'create-images-component', 
    templateUrl: './angular2/app/images/image-form.component.html', 
    providers: [ 
     ImageService 
    ], 
    directives: [ 
     ErrorsComponent, 
     NgClass, 
    ] }) 

export class CreateImageComponent implements OnInit { 

    public image:ImageInterface = new Image(); 
    public validationErrors; 

    constructor(public service:ImageService, 
       private _router:Router) { 
    } 

    /** 
    * File input change event 
    * @param event 
    */ 
    onFileChange(event) { 
     let file = event.target.files[0]; 
     if (!file) { 
      return; 
     } 
     if (this.isValidExtension(file) == false) { 
      swal('Invalid file format!', 'Invalid file Format. Only ' + ImageComponent.ALLOWED_EXTENSIONS.join(', ') + ' are allowed.', 'error'); 
      return false; 
     } 
     if (this.isValidFileSize(file) == false) { 
      swal('Invalid file size!', 'Invalid file size. Max allowed is : ' + ImageComponent.ALLOWED_SIZE + ', your file is : ' + this.getFileSize(file) + ' Mb' , 'error'); 
      return; 
     } 
     console.log(file); 

     let reader = new FileReader(); 
     reader.onload = (e) => { 
      this.image.base64 = e.target.result; 
     }; 
     reader.readAsDataURL(file); 
    } 

    /** 
    * Check if file has valid extension 
    * @param file 
    */ 
    private isValidExtension(file:File):boolean { 
     let allowedExtensions = ImageComponent.ALLOWED_EXTENSIONS; 
     let extension = file.name.split('.').pop(); 
     return allowedExtensions.indexOf(extension) !== -1 
    } 

    /** 
    * Check file size 
    * @param file 
    * @returns {boolean} 
    */ 
    private isValidFileSize(file) { 
     let size = this.getFileSize(file); 
     return size < ImageComponent.ALLOWED_SIZE; 
    } 

    /** 
    * GEt file size in Mb 
    * @param file 
    * @returns {Number} 
    */ 
    private getFileSize(file:File):Number { 
     return file.size/1024/1024; 
    } 

    /** 
    * Clear selected image 
    * @param ev 
    */ 
    clearImage(ev) { 
     ev.preventDefault(); 
     this.image.base64 = '' 
    } 

    /** 
    * Return if image exists 
    * @returns {boolean} 
    */ 
    fileExists() { 
     return this.image.base64 && (typeof this.image.base64 !== 'undefined') 
    } 

    /** 
    * Create new image 
    */ 
    onSubmit(form) { 
     return this.service.httpPost(this.image) 
      .subscribe(
      (res) => { 
       if (res.data.errors) { 
        this.validationErrors = res.data.errors; 
       } 
       if (res.status == "success") { 
        this.successMessage = res.message; 
        swal("Good Job", res.message, "success"); 
        this.validationErrors = []; 
       } else { 
        this.errorMessage = res.message; 
       } 
      }, 
      (error) => this.errorMessage = <any>error); 
    } 

    onCancel() { 
     return this._router.navigate(['Images']); 
    } 

    get diagnostic() { 
     return JSON.stringify(this.image); 
    } 

}