webpack - Loading dynamic image in webpack

Question

I am using Angular with Webpack (with loaders like file-loader, url-loader etc.)

Now, I want to load image which is being served through http.

The build was successful, when I used require('./imgs/profile.png')

But when I used tried say E.g. require('http://myserver.com/images/profile.png') the build failed.

Now, the problem is my images are not there in local environment instead they are there on some 3rd party server say e.g. AWS S3.

How to achieve this? Below is my 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

As of now, instead of

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

I assigned image path as string to $scope

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

and in template

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

and it worked for me.