使用相对文件路径将图像添加到Javascript画布

我觉得有一个非常简单的方法可以做到这一点，但我找不到它。我有一个图像，它到我的

clientscript.js

文件的相对路径是

/images/orig classic pokemon frame.png

。我想在画布上，围绕着在代码片段最后一行上绘制的文本进行绘制：

function render(context) {
    context.fillStyle = 'black';
    context.strokeStyle = 'black';
    context.save();
    var imgFrame = new Image();
    imgFrame.src = './images/origclassicpokemonframe.png';
    imgFrame.onload = function(){
        context.drawImage(imgFrame, 0, 0, 30,30);
    };
    context.font = "24px Early GameBoy";
    context.fillText("What? _____", 10, canvasHeight-44); //20 padding plus 24 line height

文本显示在画布上，但框架从不显示。更改尺寸或x和y坐标不会产生任何差异。感谢您的帮助

编辑：将文件路径更改为

images/origclassicpokemonframe.PNG

，现在图像显示在firefox的画布上，而不是chrome上。 帮助

---

另一个编辑：我可以在chrome和firefox的控制台上看到HTTP请求正在加载它，但不知怎的，它只是不想在画布上绘制

上下文

不是全局变量。因此，在“onload”函数中使用它超出了它的范围

---

如果你的src可以在

元素中工作，那么它没有问题。

你试过

'../images/orig classic pokemon frame.png；'

try

imgFrame.onerror=（e）=>{console.log（e）；}

您尝试过使用资源的完整路径吗？我还获得了在firefox中工作的代码。可能Chrome正在从缓存同步加载图像：尝试更改onload处理程序和图像源属性的设置顺序，以便设置

onload

first@Traktor53，谢谢，这似乎把事情弄清楚了！它在上下文中，

函数呈现（上下文）{…