角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，導入圖像與[來源]語法

回答

相關問題