使用 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

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

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

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

在您的模板中：

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

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

Answer 2

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

在控制器中写一个函数：

$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 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
}

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

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 图片

Loading ng-src images with webpack

angularjs

webpack