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

Posted 2023-03-13

【中文标题】Angular 5 - 加载资源失败：服务器响应状态为 404（未找到）

【英文标题】：Angular 5 - Failed to load resource: the server responded with a status of 404 (Not Found)

【发布时间】：2018-09-07 03:44:17

【问题描述】：

我正在尝试从 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 中，但仍然无法访问这些资产并且仍然显示相同的错误。

【问题讨论】：

将 svg 复制到应用中的文件夹并从那里加载

您尝试获取此模块的 html 的路径是什么？很确定您的 svg 由于路径错误而未加载。

复制图片到 assets 文件夹并从那里使用

@Roysh 当我在本地使用它时它可以工作。但这不是目的

我认为您不应该以这种方式加载 svg。但是，您有一些语法问题 -> <\img 应该是 <img 和 src 应该是 [src]

【参考方案1】：

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

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

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

I.E.当您运行 ng build 时，角度 CLI 将在 dist 文件夹中编译您的文件。请注意assets 文件夹在那里。 node_modules 文件夹不是。

【参考方案2】：

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

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

【讨论】：

不可能，Angular 只指向 src/assets 文件夹，public 不能通过 URL 访问。

为什么要这样做？？它不会工作，因为 node_modules 在根文件夹中

你看过这个***.com/questions/40230473/…

请停止向您的帖子添加称呼，请参阅例如meta.stackexchange.com/q/2950/248731

【参考方案3】：

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

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