J'essaie de montrer une image obtenue à partir d'un serveur distant avec angular 2.
Dans mon composant, j'ai un objet qui est un objet "university_info" qui est mon modèle.
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
}
}
Tout fonctionne bien. Je reçois une image base64, mais lorsque j'essaie de l'afficher en HTML de la manière suivante:
<img [src]="'data:image/jpg;base64,'+university_info.imageBase64" />
C'est ce que je reçois:
Vous pouvez essayer d'utiliser _sanitizer.bypassSecurityTrustUrl
dire angular src
valeur est sans danger. Jetez un coup d'oeil à cette classe d'angular:
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
}
et soyez bas un exemple pour le html sûr:
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){}
}
J'ai l'impression que ce fil manque d'exemples concrets, ce qui m'a donné quelques difficultés:
Importer DomSanitizer:
import { DomSanitizer } from '@angular/platform-browser';
définir dans le constructeur:
constructor(private _sanitizer: DomSanitizer) { }
Désinfectez la chaîne Base64 que vous souhaitez transmettre en tant que source de l'image (utilisez trustResourceUrl):
this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,'
+ toReturnImage.base64string);
Lier en html:
<img [src]="imagePath">
Solution: Il suffit d'utiliser 'data:image/jpg;base64'
dans votre balise d'image comme ceci
<img src="{{'data:image/jpg;base64,' + imagePath}}" />
Veuillez trouver ci-joint un exemple approprié sur la manière de télécharger une image en Base64 dans Angular 2/4 ainsi que son affichage. La chaîne en base64 est transférée dans la console du débogueur et peut bien sûr être stockée dans. base de données etc.
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);
}
}
Vous devez vous assurer que university_info.imageBase64
est un type de chaîne alors votre code fonctionnera.
[~ # ~] démo [~ # ~] : http://plnkr.co/edit/pI35tx9gXZFO1sXj9Obm? p = aperç
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...";
}
Je voudrais proposer une solution alternative qui s'appuie sur celle fournie par @gatapia.
La solution proposée consiste à utiliser la balise de décorateur @ViewChild (voir la documentation ici https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html ), à récupérez la référence d'élément dans le composant et définissez la valeur directement comme illustré dans l'extrait de code ci-dessous. Il est important de noter que l'élément référencé via ViewChild doit être lié à une variable locale à l'aide de #, comme illustré dans le code ci-dessous.
En outre, comme l'expliquent les documents ElementRef, son utilisation expose toujours le risque que XSS soit également présent lors de l'utilisation de 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;
}
}
Le fichier plunkr suivant fournit un extrait de code de travail de ce qui précède https://plnkr.co/edit/JXf25Pv8LqrFLhrw2Eum?p=preview
Cette question a un classement Google élevé, alors j'ai pensé mettre mes conclusions ici. Utilisation de la liaison de données pour définir le [src]
La propriété d’une image peut être problématique, en particulier sur certains appareils mobiles plus anciens. Par conséquent, si vous rencontrez des problèmes de performances avec l’approche assainisseur +, vous devez définir la propriété src à l’aide du DOM directement:
constructor(private el: ElementRef) {}
...
public imageChanged(base64: string) {
const im: HTMLImageElement = this.el.nativeElement.querySelector('#imgid');
im.src = data;
}
C'est peut-être moche mais c'est rapide comme l'éclair.