Angularjs - Kann nicht ng-style auf img-tag anwenden (mit ng-repeat)

Question

Ich benutze Angularjs, um einige Bilder im DOM anzuzeigen, und wenden Sie etwas Stil auf sie (dimmen Sie den Hintergrund). Es scheint, dass ich ng-style nicht auf das img-Tag anwenden kann. Was ist der Grund dafür?

Fiddle hier.

HTML:

<div ng-controller="MyController"> 
    <div class="row"> 
     <div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts"> 
      <div class="rel"> 
      <img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" ng-style="{'background':'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('+post.link+')','background-size': 'cover'}"> 
      <li class="del">button</li><li class="getLink">get link</li> 
      </div> 
    </div> 
    </div> 
</div> 

CSS:

.del{ 
    font-size: 15px; 
    color: black; 
    z-index: 10; 
    text-decoration: none; 
    padding: 5px 10px; 
    background-color: white; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 

.getLink{ 
    font-size: 15px; 
    color: black; 
    z-index: 10; 
    text-decoration: none; 
    padding: 5px 10px; 
    background-color: white; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 
.rel{ 
    position: relative; 
    height: auto; 
    width: auto; 
    display: inline-block; 
} 

Answer 1

Bitte versuchen Sie folgendes:

HTML:

<div ng-controller="MyController"> 
<div class="row"> 
    <div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts"> 
     <div class="rel"> 
     <div class="cover-img"> 
      <img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" style="background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));background-image: url('{{post.link}}');background-size: cover"> 
     </div> 
     <li class="del">button</li><li class="getLink">get link</li> 
     </div> 
</div> 

CSS:

.del{ 
    font-size: 15px; 
    color: black; 
    z-index: 10; 
    text-decoration: none; 
    padding: 5px 10px; 
    background-color: white; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 

.getLink{ 
    font-size: 15px; 
    color: black; 
    z-index: 10; 
    text-decoration: none; 
    padding: 5px 10px; 
    background-color: white; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 
.rel{ 
    position: relative; 
    height: auto; 
    width: auto; 
    display: inline-block; 
} 

.cover-img{ 
    position:relative; 
} 
.cover-img:before{ 
    content:''; 
    background: rgba(69, 71, 94, 0.53); 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    top:0; 
    width:100%; 
    height:100%; 
} 

Answer 2

Ich glaube nicht, dass, wie ng-style funktioniert. Sie können das Beispiel here und here sehen.

Versuchen Sie folgendes:

In html:

<img ng-style="yourStyle"> 

In Controller:

$scope.yourStyle = 
{ 
    'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))', 
    'background-size': 'cover' 
} 

Hope this Hilfe.