无法加载资源：服务器...响应状态为404（未找到）

Question

我的角度项目中有奇怪的错误。我试图创建一个图像的相对路径。在app.component.ts我有这样的代码：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})

export class AppComponent  {
    imagePath = require("./Angular2Demo/Angular2/src/app/images/angular_logo.png");
}

在app.component.html，有这样的代码：

<img class="logo" [src]="imagePath" />

当我启动我的项目时，出现错误：

无法加载资源：服务器（图像的路径...）/ angular_logo.png.js响应状态为404（未找到）。

这条路应该不错，但我不知道为什么图片有扩展名.png.js，为什么不只是.png？在我的文件夹中，图像只有.png扩展名......任何想法为什么会发生这种情况？

Answer 1

你可以这样做

imagePath = './images/angular_logo.png';

要么

imagePath = './assets/images/angular_logo.png';

如果您的images文件夹位于项目的assets文件夹中。

Answer 2

为什么不呢：

imagePath = './Angular2Demo/Angular2/src/app/images/angular_logo.png';

我不明白你用require想要实现的目标。 require正在添加“.js”扩展名，它也不会返回一个路径 - 它将尝试加载JavaScript并返回一个JavaScript对象。