AlexanderBelov
@AlexanderBelov
Frontend developer

Angular2: как отпарсить JSON в background: url?

Задача такова: есть список продуктов, генерируемый *ngFor.
У каждого продукта есть изображение{{product.image}}

Это изображение я получаю из JSON файла:
[
{
  "title": "Product 1",
  "price": "3000",
  "image": "https://abcdefg/hij/klm.jpeg"
},
{
  "title": "Product 2",
  "price": "200",
  "image": "https://bbbbnnnnn/ggghhh/kjk.jpeg"
}
]


<ul>
  <li *ngFor="let product of products">
   <span class="product__image">
        {{product.image}}
  </span>
    <span class="product__title">
       {{product.title}}
    <span>
    <span class="product__price">
      {{product.price}}
   <span>
  </li>
</ul>


Проблема в том, что изображения не приведены к единому виду. Чтобы более-менее корректно их отображать в рендере на странице, мне бы подошёл вариант background-size: cover; для соответствующего блока.

Можно было бы вставить изображение через тег img и пропискать для него стили в CSS, но для imgbackground-size: cover; не получится прописать.

Каким образом будет корректно решить такую задачу?
  • Вопрос задан
  • 245 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы