Angular 2背景圖像webpack 2

Question

我嘗試在我的html模板中添加一些bg-image，但它不呈現。我搜索解決方案即時互聯網，webpack和angular docs，但coudn't找到一個正確的解決方案。

我的WebPack配置爲使用圖像文件加載器：

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' 
     } 
    ] 
}, 

和我的模板的樣子：

<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

需要導入的圖像。

1）英雄成分在裏面，你可以添加：

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

注：../public/images應該指向你的項目的圖像容器文件夾。

2）模板：

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