在webpack中加载动态图像

Question

我在Webpack中使用Angular(带有加载器，如file-loader, url-loader等)

现在，我想加载通过http提供的图像。

构建成功，当我使用require('./imgs/profile.png')

但是当我使用尝试说例如require('http://myserver.com/images/profile.png')构建失败 。

现在，问题是我的图像不在本地环境中，而是在一些第三方服务器上，例如AWS S3。

如何实现这一点?下面是我的webpack.config.js

'use strict';
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var config = {
  entry: './src/myapp.js',
  output: {
    path: './dist/',
    filename: 'myapp.min.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    loaders: [{
      test: /.js?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015']
      }
    }, {
      test: /.(jpg|jpeg|png|gif|svg)$/i,
      loader: 'file'
    }, {
      test: /.(html)$/i,
      loader: 'file?name=[name].[ext]',
      include: [
        path.resolve(__dirname, 'src', 'app')
      ]
    }, {
      test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
      loader: "file"
    }, {
      test: /.less$/,
      loader: 'style-loader!css-loader!less-loader'
    }, {
      test: /.css$/,
      loader: 'style-loader!css-loader'
    }, {
      test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
      loader: "url-loader?limit=10000&mimetype=application/font-woff"
    }]
  }
};
module.exports = config;

Answer 1

现在，而不是

require('http://myserver.com/images/profile.png')

我将图像路径作为字符串分配给$scope

$scope.imagePath = "http://myserver.com/images/profile.png";

和模板

<img ng-src={{imagePath}} alt="image" />