无法在 nodejs 中使用 webpack 开发服务器加载图像答案

【问题标题】：Cannot load image using webpack dev server in nodejs无法在 nodejs 中使用 webpack 开发服务器加载图像
【发布时间】：2016-06-13 09:28:50
【问题描述】：

您好，我正在使用以下代码尝试为我的游戏绘制背景，但我不断收到失败消息，我无法弄清楚为什么会发生这种情况。

这是我的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 目录。但我使用的是开发模式，所以我猜图像还没有被复制。为什么我的图片没有加载？

【问题讨论】：

标签： javascript node.js canvas webpack webpack-dev-server

【解决方案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');

【讨论】：