AngularJS で背景画像をエラーなく動的に設定する方法は?

AngularJS での画像背景エラーの解決

AngularJS では、ng-src は変数評価前の無効な URL エラーに対する保護手段として機能します。ただし、DIV 要素の背景画像の場合、変数が URL に組み込まれている場合に、CSS3 のbackground-size プロパティを使用すると問題が発生します。

この問題は、ブラウザによる無効な画像の解釈により、多数のエラー メッセージが表示される可能性があります。 URL。 {{"style='background-image:url(myVariableUrl)'"}} を使用するという大雑把なアプローチは可能ですが、エレガントなソリューションとはみなされません。

解決策:

この問題を解決するには、次の AngularJS コードを利用できます:

<code class="html"><li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li></code>

このコードは、ng スタイル ディレクティブを使用して背景画像を設定します。URL は imgURL 変数から動的に生成されます。 。 「/static/」プレフィックスと一重引用符は、URL を適切に構築するために重要です。このコードを組み込むことで、変数による画像 URL の制御を維持しながら、画像の背景エラーを効果的に回避できます。

以上がAngularJS で背景画像をエラーなく動的に設定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。