角2の背景画像webpack 2

Question

私のHTMLテンプレートにbg-imageを追加しようとしましたが、レンダリングされません。私は、ソリューションimのインターネット、webpackと角度のドキュメントを検索したが、適切な解決策を見つけることができませんでした。

画像のための私のWebPACKの設定用ファイルローダーは：あなたがイメージを要求する必要が

<div class="hero" 
    [ngStyle]="{'background-image':url(../../assets/img/1.jpg)'}"> 
    <div class="container"> 

    </div> 
</div> 

<div class="row"> 
    <div class="col-sm-7"> 
     <h2 class="bg-primary filter-titles ">Choose location and criteria</h2> 

     <main-search-filter></main-search-filter> 
    </div> 

    <div class="col-sm-5"> 
     <a class="btn btn-primary filter-titles" href="#">Near you</a> 

     <search-map></search-map> 
    </div> 
</div> 

Answer 1

：

module: { 
    rules: [ 
     { 
      test: /\.ts$/, 
      loaders: [ 
       'awesome-typescript-loader', 
       'angular2-template-loader' 
      ] 
     }, 
     { 
      test: /\.html$/, 
      loader: 'html-loader' 
     }, 
     { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
      loader: 'file-loader?name=assets/[name].[hash].[ext]' 
     }, 
     { 
      test: /\.css$/, 
      loader: ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap'}) 
     }, 
     { 
      test: /\.less$/, 
      exclude: /node_modules/, 
      loader: 'raw-loader!less-loader' 
     } 
    ] 
}, 

と私のテンプレートは次のようになります。

1）英雄コンポーネント内部では、追加することができます。

loadImage(image: string) { 
    return require('../public/images/' + image); 
} 

注：../public/imagesは、プロジェクトのイメージコンテナフォルダを指している必要があります。

2）テンプレート：CSSファイル内の

[ngStyle]="{'background-image': 'url(' + loadImage('1.jpg') + ')'}"