Maison > Article > interface Web > Problèmes avec les chemins d'image dangereux lors de l'utilisation d'Angular4
Cet article vous présente principalement la solution au problème du chemin de prévisualisation de téléchargement d'image non sécurisé dans Angular4. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. Étudions ensemble ci-dessous.
Préface
Lorsque je travaillais sur un projet il y a quelque temps, j'ai rencontré un problème avec la capacité d'AngularJS à implémenter la prévisualisation et le téléchargement d'images. Dans Angular4, lors du téléchargement et de la sélection d'un aperçu local d'une image via input:file
, une erreur se produit lors de l'attribution de l'url obtenue via window.URL.createObjectURL
au src de l'image :
WARNING: sanitizing unsafe URL value
Comme décrit ci-dessous Voici une solution :
code html :
<input type="file" (change)="fileChange($event)" > <img [src]="imgUrl" alt="">
Parmi eux, le changement La méthode sera appelée après la sélection de chaque image, le src de l'image doit être sous la forme d'une liaison d'attribut, et l'utilisation d'expressions d'interpolation provoquera également des erreurs
code ts
import { Component, OnInit } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser' @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { imgUrl; constructor( private sanitizer: DomSanitizer ){} ngOnInit() { } fileChange(event){ let file = event.target.files[0]; let imgUrl = window.URL.createObjectURL(file); let sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl); this.imgUrl = sanitizerUrl; } }
Tout d'abord, introduisez DomSanitizer, puis injectez-le dans le constructeur. Le plus important est de convertir l'imgUrl généré par window.URL.createObjectURL
en un chemin sûr via la méthode bypassSecurityTrustUrl de santizer.
Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.
Articles associés :
Présentation du fichier d'entrée de code source dans vue en détail (tutoriel détaillé)
Présentation de plusieurs Encodages JavaScript en détail Spécification (tutoriel détaillé)
Comment implémenter l'e-mail fonction de complétion rapide dans JS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!