如何在转盘中为移动(小型)设备使用不同的(小型)图像

Question

我正在使用ngu-carousel为我的应用程序显示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',];
}