0

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;
4

1 に答える 1

0

今のところ、代わりに

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

画像パスを文字列として $scope に割り当てました

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

そしてテンプレで

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

そしてそれは私のために働いた。

于 2016-07-05T15:03:29.353 に答える