anglejs ng-style：background-imageが動作していない

Question

私は、ng-styleの角度を使用して背景画像を適用しようとしています（前のカスタムディレクティブと同じ動作を試みました）。働いているようだ。

私が背景色を試しても、うまくいきます。私もリモートソースとローカルソースを試しましたhttp://lorempixel.com/g/400/200/sports/、どちらもうまくいきませんでした。 background-imageため

Answer 1

正しい構文は次のとおりです。NG-スタイルに

background-image: url("path_to_image"); 

正しい構文は次のとおりです。

ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}"> 

Answer 2

あなたは動的な値を解析するために、以下を使用することができます。

ng-style="{'background-image':'url({{myBackgroundUrl}})'}" 

かこのように：

あなたは、サーバーが返す（item.id）と、このような構造を持っているのを待っているデータがある場合は

ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}" 

Answer 3

：

ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}" 

あなたがそうでなければng-if="item.id"

のようなものを追加していることを確認します2つのリクエスト、または1つのリクエストがあります。これはIE11

ちょうどあなたがまたにあなたのオブジェクトを定義することができますレコードの

HTML

<div ng-style="getBackgroundStyle(imagepath)"></div> 

JS

$scope.getBackgroundStyle = function(imagepath){ 
    return { 
     'background-image':'url(' + imagepath + ')' 
    } 
} 

Answer 4

このようなコントローラ：

this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' }; 

、その後、あなたは直接オブジェクトのプロパティを変更する関数を定義することができます

this.changeBackgroundImage = function(){ 
     this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')'; 
    } 

あなたがdinamicalyあなたのスタイルを変更することができる方法でそれを行います。

Answer 5

での作業を取得するために苦労している人のために

Answer 6

これは私のために働いた、中括弧は必要ありません。

ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}" 

notification.iconここはスコープ変数です。

Answer 7

我々はCSSの背景や 背景画像の属性に行く必要動的な値を持っている場合、それはちょうど少しトリッキー に指定することができます。

コントローラにgetImage（）関数があるとします。この 関数は、 url（icons/pen.png）のような形式の文字列を返します。我々が行う場合は、ngStyle宣言は前と まったく同じ方法で指定されています。

ng-style="{ 'background-image': getImage() }" 

---

を背景画像のキー名の前後に引用符を入れていることを確認してください。 これは、有効なJavascriptオブジェクト・キーとしてフォーマットする必要があることを覚えておいてください。