如何使用json以角度连接图像

Question

我有以下结构，其中有 json 格式的图像数据，其中包含指向 assets 文件夹的链接。放置所有图像的位置。我正在考虑使用这种使用图像的方式进行测试，因为将来我们将在网络的某个地方拥有图像，并将根据类似的 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"
    }
  ]
}

test.component.ts：

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：

<ngb-carousel *ngIf="items" [showNavigationArrows]="showNavigationArrows" 
[showNavigationIndicators]="showNavigationIndicators">
  <ng-template ngbSlide *ngFor="let item of items">
    <div class="picsum-img-wrapper">
      <img [src]="item" alt="Random slide">
    </div>
  </ng-template>
</ngb-carousel>

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

Answer 1

假设您的 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 [src]="item.img" alt="{{ item.alt }}"> <!-- access the url and use the alt text -->
  </div>
</ng-template>

基于 cmets 的额外内容：

如果您想选择性地显示视频标签，我建议您这样做：

items = images.items.map(i => Object.assign({}, i, {isVideo: i.img.endsWith('.mov')})) // this only works for mov obviously

模板：

<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>