Question

所以我正在使用Angular 4构建一个项目，我的assets文件夹中有一堆图像，我的app.component.ts文件中有一个对象数组，试图引用它们。

目录设置如下

src
| app
   | app.component.ts
   | app.component.html
   | ...
| assets
   | robbie.jpg
   | ...

ts文件包含像这样的图像引用

export class AppComponent {

// array of contact objects
contacts = [
{
  name: "Robbie Peck",
  image: "../assets/robbie.jpg",
  email: "XXXXXXXX",
  phone: "XXXXXXX",
  role: "Software Developer",
  address: "XXXXXXX",
  notes: "XXXXXXX",
  selected: false
},
...
]
}

在app.component.html中，我试图通过像这样的img标签来引用这个图像

<img src={{contacts[0].image}}>

它不起作用 - 控制台说无法找到此路径，也不会在页面的assets文件夹中显示robbie.jpg图像。

我该怎么做？我如何正常引用Angular 4中的组件内的图像？

Answer 1

假设您使用ng serve命令运行应用程序，assets文件夹将与生成的javascript和html输出处于同一级别。简单地：

image: "assets/robbie.jpg"

应该有用。

Answer 2

请尝试以下语法：img src="assets/robbie.jpg"

Angular know assets文件夹路径，我们不需要明确说明。

Answer 3

试试这个

export class AppComponent {
    public contacts = [
    {
      name: "Robbie Peck",
      image: "../assets/robbie.jpg",
      email: "XXXXXXXX",
      phone: "XXXXXXX",
      role: "Software Developer",
      address: "XXXXXXX",
      notes: "XXXXXXX",
      selected: false
    },
    ...
    ]
  }

使用Angular 4的本地图像链接Src

3 个答案: