Angular 5加载SVG图片报404错误：私有npm包资源获取失败

我之前在Angular项目里也踩过类似的坑，结合你描述的情况，给你几个针对性的排查方向和解决办法：

1. 核对angular-cli.json的资源同步配置 #

首先要确保你在angular-cli.json的assets数组里的配置是完全正确的：

• 假设你的私有npm包叫my-private-ui，SVG文件在包内的路径是assets/images/my-image.svg，那正确的配置应该是：

  "assets": [
    "src/assets",
    {"glob": "**/*.svg", "input": "./node_modules/my-private-ui/assets/images", "output": "./assets/images/"}
  ]
  

• 重点检查这几个地方：
  • glob规则是否覆盖了SVG文件（比如不要写成**/*.png）
  • input路径是不是精准指向包内SVG所在的目录
  • output路径要和你HTML里引用的路径对应，比如你HTML写的是/src/assets/images/my-image.svg，那output就得是./assets/images/
• 配置修改后一定要重启Angular开发服务器，因为cli的配置变更需要重启才会生效

2. 验证同步后的文件实际路径 #

别光看配置，手动去项目的src/assets/images目录下确认：

• 是不是真的有my-image.svg这个文件？有时候同步脚本的路径可能多了一层（比如同步到了src/assets/images/my-private-ui/my-image.svg）
• 如果路径不对，要么调整angular-cli.json里的output路径，要么修改HTML里的src指向正确的位置

3. 尝试直接引用node_modules里的SVG（跳过同步） #

Angular支持直接从node_modules引用资源，不用非要同步到assets目录，你可以试试：

• 把HTML里的src改成相对路径指向node_modules里的文件，比如：

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

• 记得在angular-cli.json的assets里加上对这个包的资源支持，比如：

  "assets": [
    "src/assets",
    {"glob": "**/*.svg", "input": "./node_modules/my-private-ui", "output": "./node_modules/my-private-ui/"}
  ]
  

4. 排查大小写和权限问题 #

• 如果是在Linux或macOS环境下，文件系统是大小写敏感的，确认HTML里的文件名和实际文件名完全一致（比如my-image.svg和My-Image.svg是两个不同的文件）
• 检查本地node_modules里的SVG文件是否有可读权限，虽然本地开发很少遇到，但也可以右键文件看看权限设置

内容的提问来源于stack exchange，提问作者getName