srcにwebpack 2を通して{{}}が含まれているhtmlで画像を読み込むにはどうすればよいですか？

Question

私はHTMLでimgを読み込むためにhtml-loaderを使いますが、imgのsrcがinvariable.as <img src='../example.png'>のときはうまく動作します。しかし、私はこのような書き込み：<img src="../../../assets/images/device_{{key.deviceName}}.png">、それはエラーになります：Can't resolve '../../../assets/images/device_{{key.deviceName}}.png' in '/Users/zhangxu/Desktop/LicenseServer/angular/src/app/components/home'。 これは私のwebpack.config.jsです：

module: { 
 
     rules: [ 
 
      { 
 
       test: /\.ts$/, 
 
       loaders:['awesome-typescript-loader', 'angular2-template-loader'] 
 
      }, 
 
      { 
 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
 
       loader: 'file-loader?name=assets/[name].[hash].[ext]', 
 
      }, 
 

 
      { 
 
       test:/\.html$/, 
 
       loader: 'html-loader', 
 
       exclude: helper.root('src','index.html') 
 

 
      }, 
 

 
      { 
 
       test: /\.css$/, 
 
       exclude: helper.root('src', 'app'), 
 
       loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' }) 
 
      }, 
 
      { 
 
       test:/\.css$/, 
 
       include: helper.root('src', 'app'), 
 
       loader:'raw-loader' 
 
            
 
      }, 
 
      { 
 
       test: /\.scss$/, 
 
       loaders: ['style', 'css', 'postcss', 'sass'] 
 
      } 
 
     ], 
 

 
    },

これが私のHTMLです：

<div *ngFor="let key of devices;let i = index;"> 
 
     <div class="device" *ngIf="key.selected && !key.out_select" (click)="cancelSelectDevice(i)"> 
 
     <img src="../../../assets/images/device_{{key.deviceName}}.png" width="75"> 
 
       
 
     </div> 
 

 
</div>

どのように私はこのエラーを解決することができますか？ありがとう

Answer 1

ここでの問題は、webpackがビルド中に解決できるファイルのみをパックすることです。しかし、あなたの画像パスは実行時に計算されるので、webpackは必要な画像/画像を知ることができません。

1つの汚れた方法は、javascriptファイル内のすべての画像をインポートすることです。これを行うと、webpackはコンパイル時に必要な画像を知る機会があります。

おそらくもっとクリーンな方法は、これらのイメージをassetsフォルダに入れて、あなたのWebサーバがこのフォルダを提供できるようにすることです。

Answer 2

[src]プロパティを使用し、文字列と変数を連結することができます。

<img [src]="'../../../assets/images/device' + key.deviceName + '.png'" />