Как отобразить изображение, если путь находится в json

Question

Я новичок в Angular и использую Angular 8 У меня есть список путей к изображениям в переменной 'dataSource' в формате JSON, например:

hotdeals: Array(4) 
    0: {uri: "/Home/HotDeals/hotdeal1.png", id: "2"}
    1: {uri: "/Home/HotDeals/hotdeal2.png", id: "3"}
    2: {uri: "/Home/HotDeals/hotdeal3.png", id: "4"}
    3: {uri: "/Home/HotDeals/hotdeal4.png", id: "6"}

Как я могу показать все эти изображения на HTML, если мой базовый URL-адрес - «http://localhost», а путь к файлу указан выше в JSON.
Примечание. Путь к изображению может увеличиваться или уменьшаться. Означает, что на этот раз я получил 4 изображения, но если я получу 5 путей к изображениям. Так как я могу справиться с этим?

компонент приборной панели. html

ngOnInit() 
  {
    this.apiService.getHotDeals('pop').subscribe(home=>{
      this.dataSource=home;
console.log(this.dataSource)    

}

компонент приборной панели. html

<owl-carousel [options]="{items:3, dots:true, navigation:true}"
          [carouselClasses]="['owl-theme', 'row', 'sliding']" >          
                    <div class="best-deals-single"><a><img src="{{this.dataSource}}" height="300" width="200" alt=""></a></div>               
 </owl-carousel>

Скриншот консоли источника данных

Answer 1

Вы должны использовать al oop для отображения всех изображений:

компонент:

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class YourComponentComponent {
  imgHost = environment.imgHost;
}

шаблон:

<owl-carousel
  *ngIf="dataSource.hotdeals"
  [options]="{items:3, dots:true, navigation:true}"
  [carouselClasses]="['owl-theme', 'row', 'sliding']"
  [items]="dataSource.hotdeals" 
>
  <div class="item" *ngFor="let img of dataSource.hotdeals">
    <div style="align-content: center;">
      <img style="height: 260px; width: 100%;" [src]="imgHost + img.uri" />
    </div>
  </div>
</owl-carousel>

environment. json

export const environment = {
  imgHost: 'https://example.com'
};

и если ваши изображения находятся на том же сервере, что и приложение,

environment.prod. json

export const environment = {
  imgHost: ''
};