使用webpack加载ng-src映像

Question

我正在加载角度的图像,例如

<img ng-src="{{::path-to-image}}"/>

当我使用webpack捆绑我的应用程序时,图像URL在运行时被解析,因此不会被webpack的加载器捆绑.

这是我正在使用的图像加载器:

  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loader: 'url?limit=8192!img'
  } 

webpack如何捆绑运行时解析的那些图像？

Answer 1

因为我也需要这样的功能,并且发现原始答案远非一个完美的解决方案,我最终自己搞清楚了.

在控制器中写一个函数:

$scope.loadImage = function(image) {
    return require('/images/' + image);
};

并在你的ng-src中使用它:

<img ng-src="{{loadImage('myImage')}}" />

之后,为了使动态需要工作,您可以使用上下文.

例如:https: //github.com/webpack/webpack/tree/master/examples/require.context#examplejs

Answer 2

如果您需要以编程方式生成的图像路径,则意味着您有一些逻辑期望此图像存在.换句话说,您应该将此图像视为该逻辑的依赖关系,因此您需要明确地要求它.

在你的JS代码中(例如:controller)

this.imageUrl = require('path-to-image' + someDynamicValue + '.jpg');

在您的模板中:

<img ng-src="{{::myCtrl.imageUrl}}"/>

Webpack足够聪明,可以理解动态require语句并捆绑与该表达式匹配的图像.有关更多详细信息,请查看文档:https://webpack.github.io/docs/context.html)