how to connect images in angular using json - html

Question

I have the below structure, where I have my images data in the json format which has the links to the assets folder. Where all the images are placed. I was thinking to use this way of using images for testing as in future we will have images somewhere in the web and will fetch from the there based on the similar 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>
I am unable to connect the images to the HTML, any help would be great.

Answer 1

assuming your tsconfig is properly configured to import json (your ts compiler would throw errors at you if not)
you should be able to do this with:
items = images.items; // not sure why you had that index -> map structure?
and
<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>
extra based on comments:
if you want to optionally show a video tag, I'd recommend somehting like this:
items = images.items.map(i => Object.assign({}, i, {isVideo: i.img.endsWith('.mov')})) // this only works for mov obviously
template:
<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>