Javascript 如何使用Node.js和HTML加载静态图像？

我正在尝试创建一个简单的基于浏览器的游戏

这是我在

package.json中的开发脚本：

"scripts": {
    "watch": "cross-env NODE_ENV=development parcel index.html --no-hmr"
  },

这是我的
index.html
中定义的
canvas
：

<div id="game-wrapper">
    <canvas id="game-canvas" height="512" width="288"></canvas>
    <script src="src/game.js"></script>
</div>

如果我这样做，我会得到以下异常：

Uncaught DOMException: Failed to execute `drawImage` on `CanvasRenderingContext2D`: The HTMLImageElement provided is in the `broken` state.

我应该怎么做呢？
客户端URL路径中通常不包括
public
文件夹。试试
/image.png
。我们确实需要了解您的设置；你的服务器代码是什么样子的？@ChrisG我不知道你说的“服务器代码”是什么意思。目前，我只是使用上面的
watch
脚本在本地环境中运行。不过，这是一个本地服务器，通常用于开发。此外，我刚刚看到，您可能试图在加载图像之前过早地绘制图像；设置src并不需要等待。您需要使用
image.onload=function（）{…}
并在其中绘制图像。@ChrisG我认为您是对的。我将代码修改为
image.onload=function（）{context.drawImage（image，x，y）}，其中，
x
和
y
在循环中不断更新，但没有绘制任何内容。奇怪的是，如果我使用
context.fillText（“Score:+Score，10，canvas.height-20”），我可以看到显示的文本。您需要确保使用的图像路径正确。我假设您的站点是在类似于
localhost:8080
；转到
localhost:8080/image.png
应显示图像。如果没有，你需要找出正确的路径；在此之前，对JS代码进行故障排除是浪费时间。
Uncaught DOMException: Failed to execute `drawImage` on `CanvasRenderingContext2D`: The HTMLImageElement provided is in the `broken` state.