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

Posted 2023-03-05

【中文标题】如何从 src/images 文件夹而不是 angular 2 中的 assets 文件夹加载图像

【英文标题】：How to load image from src/images folder rather than from assets folder in angular 2

【发布时间】：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  src="./images/img.jpg">
</div>

browser output 我的输出链接

code snap源码截图

【参考方案1】：

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

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

<img  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 安装