ng-styleを使用してAngularJSで背景画像を動的に設定する方法?

AngularJS: ng-src CSS 背景画像 URL と同等

AngularJS では、ng-src 属性を利用することでエラーのない画像が保証されますURL 内の変数参照を解決してレンダリングします。ただし、background-image: url(...) 構文を使用して背景画像が DIV 要素に適用される場合、動的変数の組み込みと早期のブラウザ エラー表示により、同様の問題が発生します。

この問題に対処するには、さらに多くの対策が必要です。単に背景画像スタイル全体を二重中括弧で囲むよりも洗練されたアプローチです。代わりに、JavaScript 式と組み合わせて ng スタイルのディレクティブを使用する直接的な方法が特定されました。

background-image プロパティを中括弧内にカプセル化し、その前に 'url(' および ')' を付けることで、 /static/ と imgURL 変数 (または任意のカスタム変数) を連結すると、必要な動的バインディングが実現します。この JavaScript ベースのソリューションは変数参照を正確に解決し、早期のエラーの発生を防ぎ、よりクリーンなコードベースを維持します。

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