Angular 如果路径为json，如何显示图像

我在Angular方面是新手，我使用Angular 8 我有JSON格式的“dataSource”变量中的图像路径列表，如下所示：

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

如果我的基本url是“”，文件路径是上面的JSON格式，那么如何在HTML上显示所有这些图像。
注意：图像路径可能增加或减少。意味着这一次我得到了4个图像，但如果我得到了5个图像路径。那我怎么处理呢

dashboard.component.html

dashboard.component.html

必须使用循环来显示所有图像：

组件：

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

模板：

@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.prod.json

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

export const environment = {
  imgHost: ''
};

必须使用循环来显示所有图像：

组件：

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

模板：

@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.prod.json

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

export const environment = {
  imgHost: ''
};

您需要将图像放入项目的资产文件夹中，将图像路径更改为
/assets/path to image
。这是我应该做的work@AshotAleqsanyan图像存储在服务器上。我从数据库中获取路径和文件名。在这里，我使用localhost不提及我的服务器地址。在这种情况下，渲染时必须在图像Uri之前添加服务器URLthem@AshotAleqsanyan它不起作用了。你能看到我的json吗。它在hotdeals=>uri@ManishaChris已更新答案。您需要将图像放入项目的“资源”文件夹中，将图像路径更改为
/assets/path to image
。这是我应该做的work@AshotAleqsanyan图像存储在服务器上。我从数据库中获取路径和文件名。在这里，我使用localhost不提及我的服务器地址。在这种情况下，渲染时必须在图像Uri之前添加服务器URLthem@AshotAleqsanyan它不起作用了。你能看到我的json吗。它在hotdeals=>uri@ManishaChris已经更新了答案。我的图像路径是hotdeals=>uri…你可以看到我的jsondata@Manisha尝试更改
[src]=“'https://example.com/“+img.url”
Chris请将[src]=“imgHost+img”更改为
[src]=“imgHost+img.uri”
我的图像路径位于hotdeals=>uri中……您可以看到我的jsondata@Manisha尝试更改
[src]=“'https://example.com/“+img.url”
Chris请将[src]=“imgHost+img”更改为
[src]=“imgHost+img.uri”