無法在nodejs中使用webpack開發服務器加載圖像

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); 

我的文件目錄結構是這樣的：

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

我試圖改變this.background.src到./static/bg.jpg但它仍然無法正常工作。

我使用命令npm run dev在webpack-dev-server上運行我的代碼。在生產中，源代碼和靜態文件將被複制並捆綁到dist目錄。但我正在使用開發模式，所以我猜圖像還沒有被複制。爲什麼我的圖片沒有加載？

Answer 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 = "../images/bg.jpg"; 

這樣：

this.background.src = require('../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');