无法加载资源：服务器...响应状态为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 = './Angular2Demo/Angular2/src/app/images/angular_logo.png';

我不了解您要使用require完成的工作。 require正在添加＆＃34; .js＆＃34;扩展，它也不会给你一个路径 - 它会尝试加载JavaScript并返回一个JavaScript对象。

Answer 2

你可以做到

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

或

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

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