web-dev-qa-db-ja.com

BASE64からイメージangular 2

angular 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" />

それは私が得るものです：

enter image description here

enter image description here

enter image description here

imageangularbase64
18
Marco Castano

angular src値が安全であることを示すために_sanitizer.bypassSecurityTrustUrlを使用することができます。角度からこのクラスを見てみましょう：

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){}
}
12
AngJobs on Github

このスレッドには具体的な例がないため、いくつかの困難が生じました。

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">
36
Laurens

ソリューション：このように'data:image/jpg;base64'を画像タグに使用します

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

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);
  }

}
10
Bhail

university_info.imageBase64がstring typeであることを確認する必要があります。そうすれば、コードは機能します。

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...";
}
4
micronyks

@gatapiaが提供するソリューションに基づいた代替ソリューションを提案したいと思います。

提案された解決策は、@ ViewChildデコレータタグを使用することです（こちらのドキュメントを参照してください https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html ）。コンポーネント内の要素参照を取得し、以下のコードスニペットに示すように値を直接設定します。以下のコードに示すように、ViewChildを介して参照される要素は、＃を使用してローカル変数にバインドする必要があることに注意してください。

また、ElementRefのドキュメントで説明されているように、ElementRefを直接使用すると、DomSanitizerを使用するときにもXSSが存在するリスクがまだあります。

@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

3
JeanPaul A.

この質問はグーグルのランキングで高くなるので、ここに調査結果を載せると思いました。データバインディングを使用して画像の[src]プロパティを設定すると、特に一部の古いモバイルデバイスで問題が発生する可能性があります。したがって、サニタイザーとバインドのアプローチでパフォーマンスの問題がある場合は、DOMを直接使用してsrcプロパティを設定する必要があります。

constructor(private el: ElementRef) {}

...

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

これはいかもしれませんが、非常に高速です。

1
gatapia