从提供的图像列表中设置 img src - Angular 4+答案

【问题标题】：Setting img src from a list of provided images - Angular 4+从提供的图像列表中设置 img src - Angular 4+
【发布时间】：2018-01-09 15:47:06
【问题描述】：

我有一个表单，其中有 3 个空的img 标签。 用户将获得一个图像列表（图像保存在服务器上）。用户可以从列表中选择任何图像，将其设置为空img 标记之一的src。

当前代码：

<img style="width: 100px"  src="{{image1}}" onerror="this.src='http://localhost:3000/assets/images/ic_crop_original_black_48dp_2x.png';" href="#modal-sections" uk-toggle>
<img style="width: 100px"  src="{{image2}}" onerror="this.src='http://localhost:3000/assets/images/ic_crop_original_black_48dp_2x.png';" href="#modal-sections" uk-toggle>
<img style="width: 100px"  src="{{image3}}" onerror="this.src='http://localhost:3000/assets/images/ic_crop_original_black_48dp_2x.png';" href="#modal-sections" uk-toggle>

以上输出：

这些是用户未选择图像时的默认图像。

请注意：当用户点击其中一张默认图片时，会在弹出窗口中显示图片列表。

供用户从中选择图像的图像列表：

以上内容显示在弹出窗口中。

设置图片：

 <img src="/assets/images/cat1.svg" (click)="setImage('/assets/images/cat1.svg')">

目前，我将通过单击图像的url 传递的图像设置为setImage() 方法，该方法将url 分配给图像的src。

 image1: String;
 image2: String;
 image3: String;

setImage(url) {
   this.image1 = url;
}

问题：

我怎样才能使它更有活力？这样用户就可以为所有 3 个空图像单独设置img src。当前的代码看起来很乱。我想不出更好更动态的方法。

如果问题没有意义，请告诉我，我会再次解释。解释这一点有点困难。

【问题讨论】：

标签： javascript html angular image

【解决方案1】：

我想像这样的事情？假设弹出窗口是同一类的一部分，您可以将 URL 存储在一个数组中，并通过它们 *ngFor 来创建元素。然后，您可以更改之前选择的索引的 URL。

// Image elements
<img *ngFor="url of imgURLs; let i = index" (click)="setSelectedIndex(i)" [src]="url" style="width: 100px" onerror="this.src='http://localhost:3000/assets/images/ic_crop_original_black_48dp_2x.png';" href="#modal-sections" uk-toggle>

// Properties
imgURLs = ['', '', '']
selectedIndex: number;

// When selecting an empty image to set
setSelectedIndex(index: number) {
    this.selectedIndex = index;
}

// Setting the url of that selected index
setImage(url) {
   this.imgURLs[this.selectedIndex] = url;
}

如果我在这里有错误的想法，请告诉我。

【讨论】：

【解决方案2】：

这将填充默认图像列表

<img *ngFor="let img of imageUrls; let i = index" (click)="setSelected(i)" [src]="img.image" style="width: 100px" onerror="this.src='http://localhost:3000/assets/images/ic_crop_original_black_48dp_2x.png';" href="#modal-sections" uk-toggle>

在弹出窗口中添加此代码

<img *ngFor = "let image of imageList"  [src]="image.url" (click)="setImage(image)">

你的 TS 文件应该是这样的

 currentSelected:number;
 imageUrls:any=[ { id:1, image:''},{ id:2, image:''},{ id:3, image:''}] //Selected image will save here 
 imageList:any =[
   { id :1,
     url:'https://placeimg.com/100/100/people'
   },
    {
      id :2,
     url:'https://placeimg.com/100/100/nature'
   },
    {
      id :3,
     url:'https://placeimg.com/100/100/tech'
   }
 ]
 setSelected(i){
   this.currentSelected = i;
 }
 setImage(image){
   this.imageUrls[this.currentSelected].image= image.url;
 }

注意我放置了一些虚拟图片。让我知道它是否有帮助。

【讨论】：