本地文件显示AngularJS 4中的404错误

Question

我是Angular 4的新手；我已经使用npm install -g @angular/cli安装了。然后使用ng new my-app创建一个新项目。

|-src
|  -app
|    app.component.css
|    app.component.html
|    app.component.spec.ts
|    app.component.ts
|    app.module.ts

src文件夹包含应用程序文件夹，其中包含上面的CSS，TS，HTML文件。现在我在应用程序文件夹中添加了一个图像

|-src
|  -app
|    app.component.css
|    app.component.html
|    app.component.spec.ts
|    app.component.ts
|    app.module.ts
|    image.jpg

问题是，当我在App.component.html中添加<img src="image.jpg">标签时，它在控制台中显示404错误。但是，如果我在app.component.css中添加了诸如 background: url('image.jpg');之类的样式，则可以正常工作。

请问有什么建议吗？谢谢。

Answer 1

您应该将所有公共资产(例如图像(放在src/assets文件夹中

然后，您可以像/assets/image.jpg

那样通过html/css访问它们

文件结构应如下：

- src
  - app
  - assets
      image.jpg

Answer 2

您需要给出图像路径位置。您可以这样做：

<img src="./image.jpg">

这样，您可以给出image.jpg文件的引用。