如何使用 webpack ng-include 一个 svg
Posted
技术标签:
【中文标题】如何使用 webpack ng-include 一个 svg【英文标题】:how to ng-include an svg with webpack 【发布时间】: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,...";
这并不多,但这是符合我当前限制的诚实工作。
【讨论】:
以上是关于如何使用 webpack ng-include 一个 svg的主要内容,如果未能解决你的问题,请参考以下文章