如何在angular2

Question

您好我是角度2的新手。我在一个小项目中，我必须设置图像。 这是我的app.component.ts

`

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
fullImagePath: string;
constructor() {
    this.fullImagePath = '/assets/imges/therealdealportfoliohero.jpg'
  }
ngOnInit() {
  }
}

`

和html是 `

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

`

但是在这个过程中我必须在单独的变量中声明所有图像。但是我想声明一个数组，并加载所有并使用它们像`

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath/(myImagename)">
    </div>
</div>

`

Answer 1

如果要迭代数组，可以使用*ngFor。 例如，如果您有此图像路径数组：

this.imagePaths = ['image/path/1.png', 'image/path/2.png', 'image/path/3.png'] 

您可以在html中执行此操作：

<div class="row">
    <div class="col-xs-12">
        <div *ngFor="let path of imagePaths">
           <img [src]="path">
        </div>
    </div>
</div>

如果您只想迭代图像名称数组，可以这样做：

如果在已有基本URL的情况下获得包含图像名称的数组：

this.imageUrl = '/assets/images/';
this.images = ['1.png', '2.png', '3.png'];

你可以这样做：

<div class="row">
    <div class="col-xs-12">
        <div *ngFor="let image of images">
           <img src="{{imageUrl + image}}">
        </div>
    </div>
</div>

或者，如果您还没有设置imageUrl属性，则可以执行以下操作：

<div class="row">
        <div class="col-xs-12">
            <div *ngFor="let image of images">
               <img src="/assets/images/{{image}}">
            </div>
        </div>
    </div>

Answer 2

是的我明白了

<img id="logo" [src]="fullImagePath + '/logo.png'" alt="Simpla Admin logo" />

并且我不必声明为数组。 只是

this.fullImagePath = '/assets/imges';