角2和的WebPack，导入图像与[来源]语法

进出口试图导入图片在我的角2的应用程序是这样的：角2和的WebPack，导入图像与[来源]语法

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

但是，当我使用[来源]标签的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' 
    }) 
    ] 
};

我为什么要使用[来源]的原因是图片在运行时期间动态更改，并且url必须能够更改。有谁知道我可以如何配置webpack以将[src]标签包含在我的应用程序中导入的图片？

来源

2016-07-29 Jakob Svenningsson

的[的WebPack不能导入图像可能的复制（使用表达和angular2打字稿）]（http://stackoverflow.com/questions/36148639/webpack-not-able-to-import-images-using-express-and-angular2-in-typescript） – 030

把require（）语句在你的组件文件：

那么你可以写你的HTML以同样的方式：

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

来源

2017-01-05 16:14:18 yfcosy

角2和的WebPack，导入图像与[来源]语法

回答

相关问题