nodejsのwebpack dev serverを使用してイメージをロードできません

Question

こんにちは私は自分のゲームの背景を描画しようとするために次のコードを使用していますが、失敗メッセージが表示され続けています。

これは私のmain.jsです：

this.background = new Image(); 

var context = document.getElementById('canvas').getContext('2d'); 

var loaded = false; 

var drawBackground = function() { 

    loaded = true; 

    var pattern = context.createPattern(this.background, 'repeat'); 
    context.fillStyle = pattern; 
    context.fillRect(0, 0, 10000, 10000); 
} 

this.background.onload = drawBackground; 
this.background.src = "../images/bg.jpg"; 

setTimeout(function() { 
    if (loaded) { 
    console.log('success'); 
    } else { 
    console.log('falilure'); 
    } 
}, 3000); 

マイファイルのディレクトリ構造は次のようになります。私は./static/bg.jpgからthis.background.srcを変更しようとしている

- dist 
    - static 
    - bg.jpg 
    - bundle.js 
- images 
    - bg.jpg 
- src 
    - main.js 
- server.js 

が、それはまだ動作しません。

私は、コマンドnpm run devを使用してwebpack-dev-serverで自分のコードを実行しています。運用環境では、ソースコードと静的ファイルがコピーされ、distディレクトリにバンドルされます。しかし、私は画像がまだコピーされていないと思うので、私は開発モードを使用しています。画像が読み込まれないのはなぜですか？

Answer 1

私は1日の微調整の後、この解決策を見つけました。私は自分のコードでいくつかの間違いを犯しました。

イメージをwebpack-dev-serverにロードするには、webpack.config.js（またはwebpack-dev-serverの設定ファイルに指定した名前）で設定されたローダーを使用する必要があります。

だから私はこのようなモジュール部内のローダーの定義を置く：

module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     include: path.join(__dirname, 'src') 
     }, 
     { test: /\.(png|jpg)$/, loader: 'url-loader?limit=90000' } 
    ] 
    }, 

は今ここにトリッキーな部分です、一人でローダーを使用すると、あなたのイメージが表示されません。あなたはjavascriptコードのリソースとしてそれを要求する必要があります。

this.background.src = require('../images/bg.jpg'); 

しかし、まだ動作していないことを、私は同期モデルの非同期呼び出しを使用していたので：だから、質問のコードでは、私はこれに

this.background.src = "../images/bg.jpg"; 

を変更する必要があります。 コールバックを受け取り、コールバックに画像を描画するためにonload呼び出しを変更する必要があります。その後、コードが最終的に動作します。それは次のようになります：

var image = this.background; 
var _canvas = document.getElementById('canvas'); 
this.ctx = _canvas.getContext('2d'); 
var drawBackground = function (callback) {  
     callback(this); 
} 

image.onload = drawBackground(() => { 
    let pattern = this.ctx.createPattern(image, 'repeat'); 
    this.ctx.fillStyle = pattern; 
    this.ctx.fillRect(0, 0, _canvas.width, _canvas.height); 
}); 
image.src = require('../images/bg.jpg');