angularjs - 使用 webpack 加载 ng-src 图片

Question

我正在加载带有 Angular 的图像，例如

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

当我将我的应用程序与 webpack 捆绑在一起时，图像 URL 在运行时被解析，因此不会被 webpack 的加载器捆绑。

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

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

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

Answer 1

因为我也需要这样的功能，并且发现原始答案远非完美的解决方案，所以我最终自己弄清楚了。

在 Controller 中编写一个函数:

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

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

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

之后，要使动态需要工作，您可以使用 context .

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