Angular 2 Hintergrundbild Webpack 2

Question

Ich versuche, einige Bg-Bild bei meiner HTML-Vorlage hinzuzufügen, aber es ist nicht zu rendern. Ich suchte nach Lösungen im Internet, Webpack und eckigen Dokumenten, fand aber keine passende Lösung.

meine webpack config-Datei loader für Bilder:

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

und meine Vorlage wie folgt aussieht:

<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

Sie das Bild benötigen müssen.

1) Innerhalb der Held-Komponente können Sie hinzufügen:

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

Hinweis: ../public/images zum Bilder Container Ordner Ihres Projekts zeigen sollte.

2) Die Vorlage:

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