如何从 src/images 文件夹而不是 angular 2 中的 assets 文件夹加载图像答案

【问题标题】：How to load image from src/images folder rather than from assets folder in angular 2如何从 src/images 文件夹而不是 angular 2 中的 assets 文件夹加载图像
【发布时间】：2018-02-20 21:10:03
【问题描述】：

我是 Angular 2 的新手。我正在通过 Angular cli 生成 Angular 2 项目。如果我将我的图像保存在src/images 文件夹中，则它在浏览器中找不到显示的 404 文件，如果它在src/assets 文件夹中则作为其显示图像。

这是什么原因以及如何从 src/images 文件夹中加载图像..？

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="./images/img.jpg">
</div>

browser output 我的输出链接

code snap源码截图

【问题讨论】：

标签： angular angular-cli

【解决方案1】：

angular-cli 生成 .angular-cli.json，您可以在其中找到项目配置，您可以使用 .angular-cli.json 中的 assets 数组列出您在构建项目时要按原样复制的文件或文件夹。

将您的文件放入assets 并使用：

<img width="300" src="/assets/images/img.jpg">

【讨论】：

感谢您的建议。但是我的查询没有放入assets文件夹，有没有其他方法可以访问src/images/img.jpg。
为什么要这样做？
这是我的项目要求，我已经看到图像位于 src/images 文件夹中的示例。但对我来说它不起作用。我不知道为什么。

【解决方案2】：

更新了最新答案：

按照以下步骤：

我的图片位于 src => images => 1.png 这意味着位于 assets 文件夹之外

.angular-cli.json

打开 angular-cli.json 文件找到 assets 数组，在数组中添加你的文件夹名称，如图像。

"assets": [
  "assets",
  "images",
  "favicon.ico"
],

componenet.html

<img src="images/1.png">

【讨论】：

是的，工作正常。但是对于不是正确的解决方案。
@Prava - 两者都对我正常工作，并在我的 ans 中看到最近更新的输出图像。
我使用了我没有在控制台中得到那个标签，因为同样的 404 错误。
如果你只使用 webpack，那么会工作，否则就不行。
使用此命令将 webpack 添加到您的项目中。 1. ng 弹出，2. npm 安装