ホームページ > 記事 > ウェブフロントエンド > 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
rreee まず、DomSanitizer を導入し、それをコンストラクターに挿入します。最も重要なことは、サンタイザーの bypassSecurityTrustUrl メソッドを通じて、
生成された imgUrl を 安全な window.URL.createObjectURL
パスに変換することです。
最後に、生成された安全な URL を imgUrl に割り当てます。これで問題はなくなります~
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語に関する他の関連記事に注目してください。 Webサイト!
推奨書籍:
AngularJS が価格計算機能を実装Webpack が Electron アプリケーションを構築する方法以上がAngular 画像アップロードのプレビュー パスの問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。