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 :

Comment vue+springboot implémente les problèmes inter-domaines d'authentification unique (tutoriel détaillé)

Détails des problèmes courants utilisé JavaScript Encapsulation des classes d'outils (tutoriel détaillé)

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 la fonction de code de vérification par glisser-déposer à l'aide de jQuery et vue

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!