Question

我正在尝试从node_modules中的包中获取svg图像，我从我的私有本地npm注册表安装，下载的包存在于我的项目的node_modules下，我的html代码是这样的

<img src="/src/assets/images/my-image.svg">

因为我在angular-cli.json文件中使用一个小脚本将资产从node_modules传递到此本地资产文件夹。我有“无法加载资源：服务器响应状态为404（未找到）” 我验证了图像存在于node_modues上，我可以预览它，我正在使用angular / cli 1.6.8

更新

Angular不会访问node_modules文件夹中的资源，但我找到了一种方法，使用此代码：

"assets": [
    { "glob": "**/*",
      "input": "../node_modules/my-private-package.assets/",
      "output": "./assets/" },
    "assets",
    "favicon.ico"
  ]

在angular-cli.json中，但仍然无法访问这些资产，仍然说同样的错误。

Answer 1

node_modules文件夹用于依赖项，而不是您在应用程序中使用的资源（如svg）。

尝试将图像文件放在assets文件夹中，然后链接到它：

<img src="/assets/my-image.svg">

即。当您运行构建时，角度CLI将在dist文件夹中编译您的文件。请注意assets文件夹在那里。 node_modules文件夹不是。

Answer 2

我发现您的来源存在问题。 node_modules位于src文件夹之外。它应该是../node_modules。尝试下面的代码，

<img src="../node_modules/my-private-packages/images/my-image.svg">

Answer 3

这是获取图片的最佳方式。

<div>
    <img src="assets/images/dashboard.svg">
</div>

Angular 5 - 无法加载资源：服务器响应状态为404（未找到）

3 个答案: