如何在轮播中为移动（小型）设备使用不同的（小型）图像？

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',];
}