WebpackとAngular2で画像を生成する

Question

Angpack2には、Webpackを使ってプロジェクトを構築し、スキャナーを使っている小さなアプリがあります。

私が直面したことは、TypeScriptファイルで指定された本番用のイメージを読み込むことができないことです。 npm run buildを実行すると、生成されたファイル内にこれらのイメージが見つかりません（SCSSで指定されたイメージが生成されます）。

ここでは、コンポーネントの外観とWebpackの設定が非常に基本的に見える例を以下に示します。

主な質問は、それを修正することが可能です、それを処理するためにいくつかのWebpackローダーを追加する必要があるかもしれませんが、私は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

Webpackが提供するのはfile-loaderと思います。ファイルをインクルードする場合は、ローダーを使用してファイルを要求することができ、出力内の相対パスが返されます。

npm install --save-dev file-loader 

あなたdataその後、（提供されたパスがあなたのファイルへの相対です）、次のようになります：評価されたときにこれは、このような何かを生み出す

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

：

でそれをインストールします。

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