Question

我正在尝试添加具有相对路径的本地图像图标。设置具有相对路径的动态图标，但未找到模块：错误：无法解析'../../content/images/{{imageList[item.type]}}'。使用 require 可变图像路径可以正常工作。

资产/图像
imageA
imageB
imageC

import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
export class PhishingDetailsComponent implements OnInit{
  public imageList: any = {'A': 'imageA.png', 'B': 'imageB.png', 'C': 'imageC.png'};
  public itemList: any = [{id: 11, type: 'A'}, {id: 21, type: 'B'}, {id: 101, type: 'B'}, {id: 121, type: 'D'}];
  public images: any = {
   'A': require('../../images/imageA.png'),
   'B': require('../../images/imageB.png'),
   'C': require('../../images/imageC.png')
  };
}

html：

 <div class="well">
  <div *ngFor="let item of itemList">
   <img [src]="images[item.type]" /> // this is working fine.
   <img src="../../images/{{imageList[item.type]}}" /> // this is not working.
  </div>
 </div>

但是出现编译错误。请帮助我纠正使用方法。谢谢。

Answer 1

尝试：

<div class="well">
  <div *ngFor="let item of itemList">
   <img class="correlation-icon" src="/assets/images/{{imageList[item.type]}}" />
  </div>
 </div>

Answer 2

您的item.type不包含完整的图像名称。

尝试一下：

 <img src="../../images/{{'image'+imageList[item.type]+'.png'}}" /> // should work :)

Answer 3

尝试

HTML文件

<div class="well">
  <div *ngFor="let item of itemList">
   <img class="correlation-icon" src="../assets/images/image{{item}}.svg" />
  </div>
</div>

后端

public itemList: any =['A','B','C','D']

具有相对路径的动态图像

3 个答案: