如何在angular2中加载图像

Question

您好，我是Angle 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';