序文
毎日の開発作業では、ページにいくつかの写真を表示するための多くの要件があります。画像のアドレスパスがクライアントのスクリプトによって設定される場合があります（データベースから取得される場合があります）。
これがAngularjsの時代です。 Angularjsを使用してページに画像を表示する場合は、 <img src=”path of image”>.
プレゼンテーションのみを考慮した場合、それが問題ないことは間違いありませんが、ブラウザのコンソールに404（見つかりません）エラーが表示されます。
この問題を解決するには、 ng-Srcを使用する必要があります。 ng-Srcを使用する前に、このエラーがどのように発生するかを再現したいと思います。
サンプルコードは次のとおりです。
サンプルソースコード
script.js
var testapp = angular .module（ "testmodule"、[]）.controller（ "testcontroller"、function（$ scope）{var animal = {name "、cat、" color： "white"、picture： "/images/cat.jpg"、}; $ scope.animal = animal;}）;index.html
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </scrip> <script src = "scripts/js/script.js"> </script> </head> <body> <div ng-controlrer = " {{animal.color}} <br/> <img src = "{{animal.picture}}"/> </div> </body> </html>上記の例では、 Name 、 Color 、 Picture 3つのプロパティを持つanimalクラスがあり、値が割り当てられています。モデルバインダーを使用して、これらのプロパティをページに使用しました。画像には、 <img> htmlタグを使用しました。
次に、この例を実行します。効果は次のとおりです。
次に、ブラウザのコンソールを開くと、このエラーが表示されます。
リソースをロードできません：サーバー応答ステータスは404（見つかりません）です。
問題は、なぜこのエラーが発生するのですか？どのように解決すべきですか？
原因 - DOMが解析されると、サーバーから画像を取得しようとします。現時点では、 src属性のAngularJS結合式{{ model }}はまだ実行されていないため、404の誤差が発生していません。
ソリューション -ソリューションバージョンは、写真内のsrc属性の代わりにng-Srcを使用します。この指令を使用した後、リクエストはAngularがこの結合式を実行した後にのみ発行されます。
NG-SRCの使用例は次のとおりです。
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </scrip> <script src = "scripts/js/script.js"> </script> </head> <body> <div ng-controlrer = " {{animal.color}} <br/> <img ng-src = "{{animal.picture}}"/> </div> </body> </html>ブラウザのコンソールを再度開くと、次のように表示されません。404は見つかりません。これは、 ng-Srcが使用されているためです。
意味
ng-Src-この指令は<img />要素のsrcネイティブ属性をオーバーライドします。
要約します
上記は、この記事のコンテンツ全体です。気に入っていただければ幸いです。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。