Generiere Bilder mit Webpack und Angular2

Question

Ich habe eine kleine App in Angular2, die Webpack zum Bau und Gerüstbau des Projekts verwendet.

Ich habe festgestellt, dass ich Bilder für die Produktion, die in den TypeScript-Dateien angegeben sind, nicht laden kann. Wenn ich die npm run build starte, finde ich diese Bilder nicht in den generierten Dateien (Die Bilder, die in der SCSS angegeben sind, werden generiert).

Hier ist, unter einem Beispiel, wie Komponente aussieht und meine Webpack-Konfiguration sehr einfach aussieht.

Die Hauptfrage ist es möglich, es zu beheben, vielleicht müssen einige Webpack Loader für diesen Fall, um damit umzugehen, aber ich habe keine Ahnung, ein Neuling in Webpack.

import { Component, OnInit, Injectable } from '@angular/core'; 

@Injectable() 
@Component({ 
    selector: 'custom-template', 
    templateUrl: './custom.html' 
}) 

export class CustomComponent { 
    public data: any = [ 
     { 
      image: '../../../assets/images/1.jpg', 
      text: 'Text 1...' 
     }, 
     { 
      image: '../../../assets/images/2.jpg', 
      text: 'Text 2...' 
     }, 
     { 
      image: '../../../assets/images/3.jpg', 
      text: 'Text 3...' 
     } 
    ]; 
} 

Answer 1

Ich glaube, die file-loader die Webpack bietet, was Sie brauchen. Wenn Sie eine Datei einschließen möchten, können Sie sie mithilfe des Loaders anfordern und den relativen Pfad in der Ausgabe zurückgeben.

Installieren Sie es mit:

npm install --save-dev file-loader 

Ihre data würde dann wie folgt aussehen (vorausgesetzt, die Pfade sind relativ zu Ihrer Datei):

public data: any = [ 
    { 
     image: require('file-loader!../../../assets/images/1.jpg'), 
     text: 'Text 1...' 
    }, 
    ... 
]; 

Dieses so etwas wie dieses produzieren würde, wenn beurteilt:

public data: any = [ 
    { 
     image: '/project-output-path/abcdef014ea5754463fac.jpg', 
     text: 'Text 1...' 
    }, 
    ... 
];