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"
>

*由于第三方包的支持，我目前无法升级到Angular 5。

解决方案

感谢Mathew提供的答案，将文件路径添加到cli资产文件夹中：

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

- FussinHussin

---

你尝试将SVG文件添加到CLI配置文件中的“资产”部分了吗？ - Reactgular

它们在资产文件夹中。 - FussinHussin

你必须手动将它们作为条目添加到CLI配置文件中的“assets”部分。Webpack 可能会将图像移动到捆绑包并重写URL。SVG 文件可能不会被移动，但URL会被重写。我认为这可能是 Angular 版本的已知问题。请记住，这是一个 Webpack 问题。 - Reactgular

好的，我会尝试一下。这对我来说没有意义，因为 .png 文件很好用，而且它们在 cli 文件中没有被列为资产。 - FussinHussin

感谢 @MathewFoscarini! - FussinHussin

很不幸，这对我没有起作用。最终起作用的是将托管提供商从Google Cloud Storage Buckets 更改为 AWS S3 Bucket 以供我的 Angular 应用使用。而且，这个解决方案不需要将 SVG 路径添加到 Angular.json 的资产数组中。 - Gabe Karkanis

Answer 1

我在 apps/shared/assets/icons/* 目录下分享了存储的 svg 图标。 对于 Angular 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"
)

- niio