ホームページ  >  記事  >  ウェブフロントエンド  >  Angular 画像アップロードのプレビュー パスの問題を解決する

Angular 画像アップロードのプレビュー パスの問題を解決する

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-13 15:09:212227ブラウズ

今回は、Angularpictureuploadのプレビューパスの問題の解決策を紹介します。Angularの画像アップロードプレビューパスの問題を解決するための注意事項は何ですか?実際のケースを見てみましょう。 。

はじめに

少し前にプロジェクトに取り組んでいたとき、AngularJSで画像のプレビューとアップロードの機能を実装した際、Angular4でinput:file上传选择图片本地预览的时候,通过window.URL.createObjectURLで取得したURLを画像のsrcに割り当てる際にエラーが発生するという問題に遭遇しました。

WARNING: sanitizing unsafe URL value

これが解決策です:

htmlコード:

<input type="file" (change)="fileChange($event)" >
<img [src]="imgUrl" alt="">
このうち、change メソッドは各画像が選択された後に呼び出されます。画像の src は、interpolation

expression

の形式である必要があります。また、エラーが発生します

TSコード

rreee まず、DomSanitizer を導入し、それをコンストラクターに挿入します。最も重要なことは、サンタイザーの bypassSecurityTrustUrl メソッドを通じて、

生成された imgUrl を

安全な window.URL.createObjectURL パスに変換することです。 最後に、生成された安全な URL を imgUrl に割り当てます。これで問題はなくなります~

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語に関する他の関連記事に注目してください。 Webサイト!

推奨書籍:

AngularJS が価格計算機能を実装


Webpack が Electron アプリケーションを構築する方法


以上がAngular 画像アップロードのプレビュー パスの問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。