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

Question

我的 Angular 项目中有奇怪的错误。我试图创建图像的相对路径。在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 对象。