Как показать фоновое изображение для каждого элемента ng-repeat

Question

Необходимо отобразить фоновое изображение на каждой карте, адрес которой исходит из набора данных, как показано ниже. Содержимое внутри col отображается правильно, но фоновое изображение не устанавливается. Может ли кто-нибудь сказать?

<div class="card" style="background-image: url({{prod.ImageUrl}})" ng-repeat="prod in prods"> 
    <div class="item"> 
     <div class="row"> 
      <div class="col"> 
       {{prod.ImageUrl}}<br/> 
       {{prod.Name}}<br/> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Вы не должны использовать атрибут style, но ng-style директивы, например, так:

ng-style="{'background-image':'url(' + prod.ImageUrl + ')'}" 

---

Для получения дополнительной информации, в данном конкретном случае фонового изображения, please check this post

---

EDIT 1: при условии (рабочий) plunk

---

EDIT 2: в качестве веб-сайт plnkr вниз на данный момент, вот working fiddle

---

EDIT 3: modified fiddle (см комментарии)

Кроме того, после перехода к пункту , png изображения не отображаются в фоновом режиме

css Свойство background-image по умолчанию не наследуется. Это может быть изменено с помощью другого свойства: background-image: inherit;

<div class="col" ng-style="{'background-image':'url(' + prod.ImageUrl + ')'}" style="border:1px solid black; width:48px;height:48px"> 

путем размещения ng-style на седловине, она работает, как, я надеюсь, вы ожидаете.

Извещение Я дал ему такие же размеры как изображение, как, я согласен с вами, повторение изображения не так круто.

---

To learn more about the scaling of background images with css