Question

我试图在我的角度2应用程序中导入图片，如下所示：

<img *ngIf="person.status" [src]="{{IMAGE_URL}}" width="20" height="20" />

但是当我使用[src]标签时，webpack并没有将图片包含在我的捆绑项目的输出文件中。如果我按照以下方式包含图片，一切都按预期工作。

<img *ngIf="person.status" src=require('IMAGE_URL') width="20" height="20" />

我的webpack配置看起来像这样（它基于角度2官方文档中的webpack教程）：

module.exports = {
  entry: {
    'polyfills': './app/polyfills.ts',
    'vendor': './app/vendor.ts',
    'app': './app/main.ts'
  },

  resolve: {
    extensions: ['', '.js', '.ts']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['ts', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=./assets/[name].[hash].[ext]'
      },
      {
        test:/\.scss$/,
        exclude: /node_modules/,
        loader:'style!css!sass'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      },
      {
        test:/\.json$/,
        exclude: /node_modules/,
        loader:'json'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

我想使用[src]的原因是图片在运行时动态变化，并且url必须能够更改。有人知道如何配置webpack以包含我的应用程序中使用[src]标签导入的图片吗？

Answer 1

将require（）语句放在组件文件中：

ngOnInit(): void {
    this.IMAGE_URL = require('../../public/images/' + this.imageName + '.png');
}

然后你可以用同样的方式编写你的html：

<img *ngIf="person.status" [src]="{{IMAGE_URL}}" width="20" height="20" />

Angular 2和webpack，使用[src]语法

1 个答案: