如何使用 webpack ng-include 一个 svg答案

【问题标题】：how to ng-include an svg with webpack如何使用 webpack ng-include 一个 svg
【发布时间】：2019-07-01 20:14:25
【问题描述】：

我使用

包含我的 svg

<div ng-include="'src/assets/arrowdown.svg'"></div>

这在使用 npm run dev 时可以正常工作：

webpack-dev-server --https --host 0.0.0.0

但是当我使用构建时，使用 ng-include 包含的 svg 不会被处理。

与其他 svg 一起，用作经典资源，它们在构建时被读取，它们的名称被更改为处理版本控制，输出如下所示：

background: url(//assets.mysite.com/build/4341cb2ee439f765105fb3258df4048c.svg) 50% no-repeat

使用 ng-include 时，最终构建如下所示：

GET https://assets.mysite.com/src/assets/img/arrowdown.svg 404 (Not Found)

所以加载器不会读取 svg

我应该怎么做才能让 webpack 检测到 ng-include 并提取资源中的 svg ？

谢谢

将 angularjs 1.5.5 与 webpack 1.13.2 一起使用。

【问题讨论】：

【解决方案1】：

在尝试了不同的方法后，我终于找到了可行的方法。

把这个放在这里，以防有人没有更好的主意。

我创建了一个包含 svg 内联的简单服务。

像这样加载资源：

<span ng-include="loadSvgResource('count')"></span>

在控制器中：

this.loadSvgResource = function(d) {
    return svgResourceService[d];
};

服务包含内联 svg：

this.count= "data:image/svg+xml,...";

这并不多，但这是符合我当前限制的诚实工作。

【讨论】：