Angular4 使用時の安全でない画像パスの問題

この記事では、Angular4 の安全でない画像アップロード プレビュー パスの問題の解決策をサンプル コードを通じて詳しく紹介します。この記事は、学習や仕事に役立つ特定の価値があります。以下を読んで一緒に学びましょう。

前書き

少し前にプロジェクトを行っていたときに、Angular4 で画像のプレビューとアップロードの機能を実装している AngularJS で、input を通じて画像のローカル プレビューを選択するという問題に遭遇しました。 file アップロード時に、window.URL.createObjectURL を通じて取得した URL を画像の src に割り当てるときにエラーが発生しました: input:file上传选择图片本地预览的时候，通过window.URL.createObjectURL获取的url赋值给image的src出现错误：

WARNING: sanitizing unsafe URL value

下面介绍一下解决方法：

html代码：

<input type="file" (change)="fileChange($event)" >
<img [src]="imgUrl" alt="">

其中，change方法会在每次选择图片后调用，image的src必须通过属性绑定的形式，使用插值表达式同样会出错

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

首先，引入DomSanitizer，然后在构造器里面注入，最重要的就是把window.URL.createObjectURL

警告: 安全でない URL 値をサニタイズしています

以下に解決策を紹介します メソッド:

htmlコード: rrreee

このうち、changeメソッドは各画像が選択された後に呼び出されます。 画像のsrcは次の形式でなければなりません。補間式を使用するとエラーも発生します

ts コード

rrreee まず、DomSanitizer を導入し、それをコンストラクターに挿入します。最も重要なことは、window.URL によって生成された imgUrl を変換することです。 createObjectURL をサンタイザーの bypassSecurityTrustUrl メソッドを通じて安全なパスにコピーします。

上記は私があなたのためにまとめたものです。

関連記事:

vue+springboot がシングル サインオンのクロスドメインの問題を実装する方法 (詳細なチュートリアル)

🎜 JavaScript で一般的に使用されるツール クラスのカプセル化について詳しく紹介します (詳細なチュートリアル) 🎜🎜🎜🎜の紹介vue のソース コードの詳細 エントリ ファイル (詳細なチュートリアル) 🎜🎜🎜🎜いくつかの JavaScript コーディング標準を詳細に紹介します (詳細なチュートリアル) 🎜🎜🎜🎜 jQuery と vue を使用してドラッグ検証コード関数を実装する方法 🎜🎜🎜🎜方法電子メールプロンプト補完関数を JS で実装します 🎜🎜

以上がAngular4 使用時の安全でない画像パスの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。