Как использовать разные (маленькие) картинки для мобильных (маленьких) устройств в карусели?

Question

Я использую ngu-carousel для отображения изображений карусели для моего приложения.

Я использую приведенный ниже html для изображений карусели

 <ngu-carousel #myCarousel [inputs]="carouselConfig" [dataSource]="carouselItems" (onMove)="onmoveFn($event)">
    <ngu-tile *nguCarouselDef="let item;">
     <div class="tile" [style.background]="'url('+item+')'"></div>
    </ngu-tile>

Для простой загрузки изображений на другое устройство я использовал приведенный ниже код:

<picture>
    <source srcset="./assets/images/chittu_1400_797.jpg " media="(min-width: 768px)">
    <img srcset="./assets/images/chittu_700_573.jpg" alt="Coastal view of ocean and mountains">
  </picture>

Как использовать медиазапрос в случае карусели, которая загружает изображения, подобные этой [style.background]="'url('+item+')'", где элементы карусели объявлены как показано ниже

carouselItems = [
    'assets/images/nature.jpg',];

Answer 1

Вы не можете использовать медиа-запросы во встроенном стиле.

Вам необходимо проверить документ с помощью JS и соответственно определить свой объект

if (window.matchMedia("(min-width: 768px)").matches) {
  carouselItems = [
    'assets/images/nature.jpg',];
} else {
  carouselItems = [
    'assets/images/nature_small.jpg',];
}