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

今回は、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 サイトの他の関連記事を参照してください。