问题描述
您好我使用以下代码尝试为我的游戏绘制背景,但我一直收到失败消息,我不知道为什么会发生这种情况。
Hi I am using the following code to try to draw a background for my game, but I keep getting the failure message and I couldn't figure out why this would happen.
这是我的 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);
我的文件目录结构如下:
My file directory structure looks like this:
- dist
- static
- bg.jpg
- bundle.js
- images
- bg.jpg
- src
- main.js
- server.js
我已尝试将 this.background.src
更改为 ./ static / bg.jpg
,但它仍然不工作。
I have tried changing this.background.src
to ./static/bg.jpg
but it still doesn't work.
我使用命令 npm run dev
在webpack-dev服务器上运行我的代码。在生产中,源代码和静态文件将被复制并捆绑到 dist
目录中。但我使用的开发模式,所以我猜,图像还没有复制。为什么我的图片未加载?
I am running my code on a webpack-dev-server using the command npm run dev
. In production the source code and static files will be copied and bundled to dist
directory. But I am using the development mode so I guess the image is not copied yet. Why is my image not loaded?
推荐答案
我已经找到了解决方案,我在我的代码中犯了几个错误。
I have found the solution for this after tweaking for a day. I have made several mistakes in my code.
要在webpack-dev-server中加载镜像,我们需要使用webpack.config.js中配置的加载器
To load the image in webpack-dev-server we need to use loaders configured in webpack.config.js (or whatever name you give to the config file of webpack-dev-server).
所以我把加载器定义放在模块部分中,如下所示:
So I put the loader definition inside the module section like this:
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
include: path.join(__dirname, 'src')
},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=90000' }
]
},
来到棘手的部分,单独使用加载器不会得到你的图像显示。您必须要求它作为JavaScript代码中的资源。因此,在问题代码中,我需要更改
Now here comes the tricky part, using the loader alone doesn't get your image displayed. You have to require it as a resource in javascript code. So in the question code I need to change
this.background.src = "../images/bg.jpg";
:
this.background.src = require('../images/bg.jpg');
但是这还是不行,因为我在同步模型上使用异步调用。
我需要更改onload调用以接收回调并在回调中绘制图像。然后代码终于工作。它看起来像这样:
But that still doesn't work, because I was using async calls on synchronous model.I need to change the onload call to receive a callback and draw images in the callback. Then the code finally works. And it would look like this:
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');
这篇关于无法使用webpack dev服务器在nodejs中加载图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!