CORB 警告导致图像未加载

Question

您好，我正在尝试在 canvas 上绘制图像，下面是我的 html 代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-type" content="image/png"; charset="UTF-8">
        <img class="single-image" src="https://www.google.com/imgres?imgurl=http%3A%2F%2Fs3.amazonaws.com%2Fpix.iemoji.com%2Fimages%2Femoji%2Fapple%2Fios-12%2F256%2Fneutral-face.png&imgrefurl=http%3A%2F%2Fwww.iemoji.com%2Fview%2Femoji%2F821%2Fsmileys-people%2Fneutral-face&tbnid=AJSgSdgVIo5bRM&vet=12ahUKEwj7mKHix93zAhW3gv0HHSCjAUQQMygAegUIARCNAQ..i&docid=xAafOcEIRf_eyM&w=256&h=256&q=neutral%20emoji&hl=el&ved=2ahUKEwj7mKHix93zAhW3gv0HHSCjAUQQMygAegUIARCNAQ" />

    </head>
    <body>
        <canvas width="320" height="320"></canvas>
    </body>
</html>

这是我的 js 代码：

function copyImageToCanvas() {
    var image = document.querySelector("img");
    var canvas = document.querySelector("canvas");

    var ctx = canvas.getContext("2d");

    ctx.drawImage(
        image, 0, 0
    )
}

setTimeout(() => {
    copyImageToCanvas();
}, 300)

当我在实时服务器上加载 html 页面时，我收到以下警告和如下所示的图像图标： enter image description here

如有任何帮助，我们将不胜感激。我找不到解决方案，是警告中的问题还是我以错误的方式加载图像？

Answer 1

尝试使用图像的实际 link。在这种情况下：

<img class="single-image" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/neutral-face.png" />

查找的方法是右键单击图像并select“在新标签页中打开图像”。您会在浏览器的地址栏中找到图像的实际 link。

注意：我不知道你为什么把你的 <img/> 标签放在 <head/> 里面，因为它不起作用。请将其放在 <body/> 标签中。如果你想把你的canvas放在图片的上面，请参考this answer。

直播：https://playcode.io/826949

CORB 警告导致图像未加载

CORB warning cause image not loading

javascript

drawimage