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')}}" />

在此之后，为了使动态需要工作，您可以使用context。

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

Answer 2

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

在您的JS代码中（例如：控制器）

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

在你的模板中：

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

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

Answer 3

我创建了一个uiImage指令requires图像。

 function uiImage() {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        var src = attr.uiImage || attr.src;

        function loadImage(image) {
          return require(`Images/${image}`);
        }

        // required for webpack to pick up image
        element.attr('src', loadImage(src));
      }
    };
  }

  uiImage.$inject = [];
  export default uiImage;

用法：

<img ui-image='myimage.png' />

webpack.config.js

我有一个Webpack解析Images，它指向我所有图像的位置。

resolve: {
  alias: {
   'Images': path.join(config.appDir, '/images')
  }
}

Answer 4

我需要在运行时使用webpack生成的哈希动态解析图像，例如imgA.bd79a5ba.png。

{
  test: /\.png$/,
  loader: 'file-loader?name=images/[name].[hash].[ext]',
}

我最终创建了一个别名模块并需要图像：

let map = {
  'imgA': require('./images/imgA.png'),
  'imgB': require('./images/imgB.png'),
  'imgC': require('./images/imgC.png')
}

这会生成地图：

{
  'imgA': imgA.bd79a5ba.png,
  'imgB': imgB.e51f66a2.png,
  'imgC': imgC.d84ae37c.png
}

在我的组件中，我从地图中解析了网址：

self.link = function link(scope) {
  scope.imageUrl = function(name) {
    function return map[name];
  }
};

加载图像非常简单：

 <img ng-src="{{ imageUrl('imgA') }}">

以上简化。我发现为地图创建模块很有用：

export default {
  'imgA': require('./images/imgA.png'),
  'imgB': require('./images/imgB.png'),
  'imgC': require('./images/imgC.png')
}

然后将其导入组件模块：

import urlMap from './imageUrlMap'
console.log(urlMap.imgA)

> imgA.bd79a5ba.png

Answer 5

我只使用CopyWebpackPlugin，根本没有开销

const CopyWebpackPlugin = require('copy-webpack-plugin');
// WriteFilePlugin  needed only for webpack 3-4 and webpack dev-server
const WriteFilePlugin = require('write-file-webpack-plugin');
plugins: [
  ...
  new WriteFilePlugin(),
  new CopyWebpackPlugin([
        {from: 'files', to: 'files'},
        {from: 'images-2x', to: 'images-2x'},
        {from: 'images', to: 'images'},
      ]),
]

使用webpack加载ng-src映像

5 个答案: