如何在webpack中包含svg

Question

我使用

包含了我的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？

谢谢

在webpack 1.13.2中使用angularjs 1.5.5。

Answer 1

尝试了不同的方法后，我终于有了一些可行的方法。

只要有人没有更好的主意，就把它放在这里。

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

加载这样的资源：

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

在控制器中：

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

该服务包含嵌入式svg：

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

虽然不多，但在我当前的限制下，这是诚实的工作。