svg 不会在生产模式下加载

Question

我所有的 svg 在开发模式下都能完美运行，只要我运行 `ng build --prod --aot"，它们就不会加载。它们都回退到 png 图像。我不知道如何修复它。我有已经在github上，并尝试过

• 绝对路径
• 相对路径
• 绑定与插值

我正在使用 angular 4.4.3

和 angular/cli 1.5.4

html：

<img
    class="chain"
    src="../assets/svgs/LinkWardenChain.svg"
    alt="Linkwarden chain graphic"
    onerror="this.src='../assets/images/LinkWardenChain.png'"
>

另一个例子：

<img
    class="chain"
    [src]="ethernet1"
    alt="ethernet connected graphic"
>

*由于 3rd 方软件包支持，我目前无法升级到 angular 5

解决方案

感谢 Mathew 的回答，将文件路径添加到 cli assets 文件夹：

"assets": [
        "assets",
        "favicon.ico",
        "./src/assets/svgs/eth-100.svg",
        "./src/assets/svgs/eth-1000.svg",
        ...etc...
      ],

Answer 1

我共享的 svg 图标存储在 apps/shared/assets/icons/* 中。对于角度 14，这有效：

在 Angular.json 中：

"assets":[
...
    {
      "glob": "**/*",
      "input": "apps/shared/assets/",
      "output": "assets"
    }
]

html 中图标的路径：

src="assets/icons/connection.svg"

并在服务器上添加了 svg mime 类型：

mimetype.assign = (
  ".html" => "text/html",
  ".txt" => "text/plain",
  ".jpg" => "image/jpeg",
  ".png" => "image/png",
  ".js" => "text/javascript",
  ".css" => "text/css",
  ".svg" => "image/svg+xml"
)