Kann Bild nicht mit Webpack-Dev-Server in Nodejs laden

Question

Hallo Ich benutze den folgenden Code zu versuchen, einen Hintergrund für mein Spiel zu zeichnen, aber ich bekomme immer die Fehlermeldung und ich konnte nicht herausfinden, warum dies passieren würde.

Das ist mein 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); 

Meine Dateiverzeichnisstruktur sieht wie folgt aus:

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

ich versucht habe this.background.src-./static/bg.jpg ändern, aber es funktioniert immer noch nicht.

Ich verwende meinen Code auf einem Webpack-dev-Server mit dem Befehl npm run dev. In der Produktion werden der Quellcode und die statischen Dateien in das Verzeichnis dist kopiert und gebündelt. Aber ich benutze den Entwicklungsmodus, also denke ich, dass das Bild noch nicht kopiert wurde. Warum wird mein Bild nicht geladen?

Answer 1

Ich habe die Lösung dafür gefunden, nach einem Tag zu optimieren. Ich habe mehrere Fehler in meinem Code gemacht.

Um das Image in webpack-dev-server zu laden, müssen wir Loader verwenden, die in webpack.config.js konfiguriert sind (oder welchen Namen auch immer Sie der Konfigurationsdatei von webpack-dev-server geben).

Also habe ich den Loader Definition innerhalb des Moduls Abschnitt wie folgt aus:

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

hier nun die schwierige Teil kommt, allein den Loader mit Ihrem Bild angezeigt nicht bekommen. Sie müssen es als Ressource in JavaScript-Code benötigen. So in der Frage Code muß ich

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

zu, dies ändern:

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

Aber das immer noch nicht funktioniert, weil ich Asynchron-Anrufe auf synchrones Modell. Ich muss den Onload-Aufruf ändern, um einen Rückruf zu erhalten und Bilder im Rückruf zu zeichnen. Dann funktioniert der Code endlich. Und es würde so aussehen:

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