Html 如何使用json在angular中连接图像

我有下面的结构，其中我有json格式的图像数据，其中有指向资产文件夹的链接。放置所有图像的位置。我在考虑使用这种使用图像进行测试的方式，因为将来我们将在web中的某个位置获取图像，并基于类似的JSON从那里获取图像：

- app
   - core
   - data 
       - img.json
   - layout
       - test.component.ts
- assets
   - images

img.json：

{
  "items" : [
    {
      "img": "/assets/images/test1.png",
      "alt" : "Image 1"
    },
    {
      "img": "/assets/images/test2.png",
      "alt" : "Image 2"
    },
    {
      "img": "/assets/images/test3.png",
      "alt" : "Image 3"
    }
  ]
}

import images from '../../data/img.json';

export class SlideshowComponent implements OnInit {
  showNavigationArrows = false;
  showNavigationIndicators = false;
  items = [0, 1, 2].map((n) => images);

  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.showNavigationArrows = true;
    config.showNavigationIndicators = true;
  }    
}

测试组件.ts：

{
  "items" : [
    {
      "img": "/assets/images/test1.png",
      "alt" : "Image 1"
    },
    {
      "img": "/assets/images/test2.png",
      "alt" : "Image 2"
    },
    {
      "img": "/assets/images/test3.png",
      "alt" : "Image 3"
    }
  ]
}

import images from '../../data/img.json';

export class SlideshowComponent implements OnInit {
  showNavigationArrows = false;
  showNavigationIndicators = false;
  items = [0, 1, 2].map((n) => images);

  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.showNavigationArrows = true;
    config.showNavigationIndicators = true;
  }    
}

HTML：

{
  "items" : [
    {
      "img": "/assets/images/test1.png",
      "alt" : "Image 1"
    },
    {
      "img": "/assets/images/test2.png",
      "alt" : "Image 2"
    },
    {
      "img": "/assets/images/test3.png",
      "alt" : "Image 3"
    }
  ]
}

import images from '../../data/img.json';

export class SlideshowComponent implements OnInit {
  showNavigationArrows = false;
  showNavigationIndicators = false;
  items = [0, 1, 2].map((n) => images);

  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.showNavigationArrows = true;
    config.showNavigationIndicators = true;
  }    
}

---

我无法将图像连接到HTML，任何帮助都会很好。

假设您的tsconfig已正确配置为导入json（如果未正确配置，您的ts编译器将向您抛出错误）

您应该能够通过以下方式完成此操作：

items = images.items; // not sure why you had that index -> map structure?

及

模板：

<ng-template ngbSlide *ngFor="let item of items">
  <div class="picsum-img-wrapper">
    <img *ngIf="!item.isVideo" [src]="item.img" alt="{{ item.alt }}"> <!-- simple ngIf to show right tag -->
    <video *ngIf="item.isVideo" [src]="item.img" alt="{{ item.alt }}" controls></video>
  </div> 
</ng-template>

---

假设您的tsconfig已正确配置为导入json（否则，您的ts编译器将向您抛出错误）

您应该能够通过以下方式完成此操作：

items = images.items; // not sure why you had that index -> map structure?

及

模板：

<ng-template ngbSlide *ngFor="let item of items">
  <div class="picsum-img-wrapper">
    <img *ngIf="!item.isVideo" [src]="item.img" alt="{{ item.alt }}"> <!-- simple ngIf to show right tag -->
    <video *ngIf="item.isVideo" [src]="item.img" alt="{{ item.alt }}" controls></video>
  </div> 
</ng-template>

太棒了-它成功了。我完全没有删除映射结构，但无论如何，我仍然没有删除images.items，如果同一文件夹中有movie.mov文件，也没有删除。有没有办法让它运行。那样的话你需要一个视频标签？解析扩展并使用基于它的ngIf或switch语句。请您提供帮助，因为这是我第一次在Angular latestAmazing上尝试类似的东西-它成功了。我完全没有删除映射结构，但无论如何，我仍然没有删除images.items，如果同一文件夹中有movie.mov文件，也没有删除。有没有办法让它运行。那样的话你需要一个视频标签？解析扩展并使用基于它的ngIf或switch语句。您能帮忙吗？因为这是我第一次在Angular上尝试类似的东西