Загрузка динамического изображения в WebPack

Question

Я использую Угловая с Webpack (с погрузчиками, как файл-погрузчик, URL-погрузчик и т.д.)

Теперь, я хочу, чтобы загрузить изображение, которое в настоящее время подается через HTTP.

сборка была успешной, когда я требуется ('./ ГИМ/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.imagePath = "http://myserver.com/images/profile.png"; 

и в шаблоне

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

, и это сработало для меня.