具有相对路径的动态图像答案

【问题标题】：Dynamic image with relative path具有相对路径的动态图像
【发布时间】：2019-06-21 09:56:12
【问题描述】：

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

资产/图像
图片A
图片B
图像C

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>

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

【问题讨论】：

错误信息是什么？
How to serve up images in Angular2?的可能重复
我收到 Module not found: Error: Can't resolve '../../content/images/{{imageList[item.type]}}'。
谢谢@Vega，这是我的错误，我忘记了图片扩展。假设 img ext 存在但它不工作。

标签： angular typescript

【解决方案1】：

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

试试这个：

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

【讨论】：

不，这不会解析正确的路径。它产生错误：无法解决。
然后，保持上面的，调整相对路径。删除 ../ 或者只是 ... 也将图像放在 /app 旁边的 assets/images 中，在 /src 中，然后更改为“/assets/images/...”并进行测试。如果后者有效，那么它就无法访问，您必须更改目录。希望清楚

【解决方案2】：

试试这个

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】：

试试这个：

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

【讨论】：

无法设置绝对路径，我有相对路径。