非常に簡単：webpackとAngular 2の画像が必要です

Question

Angular 2 Webpackアプリケーションで画像が必要な問題があります。

私は3つまたは4つのイメージローダーを試しましたが、正しく構成できないようで、HTMLの結果が正しくありません。例えば

、現時点では私は：

<img src='${require("../images/logo.png")}'> 

このイメージを含むファイルは、次のように必要とされるテンプレートの一部である：これは、エラーが生じる

@Component({ 
    selector: 'appstore-app', 
    directives: [ ...ROUTER_DIRECTIVES ], 
    styles: [require('../sass/appstore.scss').toString()], 
    template: require('./app.component.html') 
}) 

ブラウザ：

GET: http://localhost:8080/$%7Brequire(%22../images/logo.png%22)%7D 

画像ローダー画像my webpack.config.jsは次のようになります。

{ test: /\.(png|jpg|gif)$/, loader: "url-loader?limit=50000&name=[path][name].[ext]" } 

ここでは構文を混乱させるかもしれませんが、私はいくつかの方法を試してみました。これは機能しません。 $ requireは変換されずにそのままの形でHTMLに変換します！

イメージをビルドフォルダにコピーするか、DataURLとしてパッケージ化するにはどうすればよいですか？

助けてください！

Answer 1

答えを見つけました。

イメージにsrcを必要とする必要はありません。 webpackはこれを正しいローダで処理します。

Answer 2

私は証拠チェックこれませんでしたが、これは一般的な考え方です：

は、次のよう

テンプレートで

$scope.imageSrc = require('../images/logo.png'); 

そして、imageSrc内の各コントローラ内の変数にそれを必要としますあなたのローダー設定に応じて、base64でエンコードされたものか、データURLかのどちらかです。

<img src='{{imageSrc}}'> 

Answer 3

そうする必要があります。私はあなたがそれを理解したことを知っていますが、将来的に参照するためにrequireを使う必要はありません。代わりに____Urlを使用してください。 Requireは、資産を読み込むためにwebpackを使用する他のライブラリで問題を引き起こしました....それは必要ではありません。例

<img src={{appstore-logo}}> 

については

 <img src="../images/logo.png"> 

//note styleUrl and templateUrl since you have a path not inline with component 
     @Component({ 
      selector: 'appstore-app', 
      directives: [ ...ROUTER_DIRECTIVES ], 
      styleUrl: ['../sass/appstore.scss'], 
      templateUrl: './app.component.html' 
     }) 

Answer 4

とコンポーネントのコードは

@Component({ 
    selector: 'appstore-app', 
    directives: [ ...ROUTER_DIRECTIVES ], 
    styles: [require('../sass/appstore.scss').toString()], 
    template: require('./app.component.html') 
}) 
export class AppStoreComponent { 
    private appStoreImage: any = require('../images/logo.png'); 
} 

であるあなたは、このコンポーネントを適用する前にこのコードを挿入する必要があります。あなたのAppModuleで

declare function require(name: string): string; 

このコード

は、より良い方法がある場合は私に知らせてください。