Angular2加载图像答案

【问题标题】：Angular2 load imageAngular2加载图像
【发布时间】：2017-10-25 16:31:55
【问题描述】：

我在使用 angular2 在应用程序中包含图像、脚本或 css 时遇到问题。我在文件夹/app-name/img/image.jpg 中有图像，<img> 标签在 /app-name/src/app/my-component/my-component.component.html:

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

当我加载页面时，我收到错误： GET http://localhost:4200/img/image.jpg 404（未找到）

如何在angular2中创建url地址？同样的问题是当我在 index.html 中添加脚本 url 时。

感谢您的建议。

【问题讨论】：

【解决方案1】：

如果您使用 angular-cli 来构建您的项目。

您需要将img 目录包含在需要复制到输出（可部署）目录的资产列表中。

在.angular-cli.json 文件中，将img 目录添加到以下数组中：

apps[0].assets

然后你可以像下面这样使用

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

应该是这样的

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "img"
  ],

【讨论】：

【解决方案2】：

您似乎没有将您的 img 文件夹包含到您的 src 文件夹中，所以试着把它放在那里并将你的src属性值调整为/img/image.jpg

一般来说：确保您想在应用程序中使用的所有内容都在您的src 文件夹中。那里的内容（并且只有那个内容）最终将用于处理（转译、捆绑、缩小等），然后最终进入网络服务器。

src 文件夹之外的所有其他文件用于其他目的，例如配置文件、node_modules、dist 文件夹等

【讨论】：