图像未出现在github页面上

Question

I wrote a simple HTML file to put an image to a canvas. 我写了一个简单的HTML文件，将图像放在画布上。 It runs on localhost but not in github pages. 它在localhost上运行，但不在github页面上运行。

The image starry-night.jpg is on the same folder. 图像starry-night.jpg位于同一文件夹中。

<!DOCTYPE html>
<meta charset="utf-8">
<body>

<canvas id="vincent"></canvas>

<script>

        var width  = 960;
        var height = 500;
        var canvas = document.getElementById('vincent');
        var ctx = canvas.getContext("2d");
        canvas.width  = width;
        canvas.height = height;

        var image = new Image();
        image.src= "starry-night.jpg";
        ctx.drawImage(image, 0, 0);

        console.log("done");

</script>

</body>

Here is a link to it not working: http://monsieurcactus.github.io/LearnElm/canvas-example.html 这是一个不起作用的链接： http : //monsieurcactus.github.io/LearnElm/canvas-example.html

Here is a snippet also not working: 这是一个不起作用的代码段：

  var width = 960; var height = 500; var canvas = document.getElementById('vincent'); var ctx = canvas.getContext("2d"); canvas.width = width; canvas.height = height; var image = new Image(); image.src= "http://monsieurcactus.github.io/LearnElm/starry-night.jpg"; ctx.drawImage(image, 0, 0); console.log("done");

 <canvas id="vincent"></canvas>

Answer 1

Setting the image's source with the src attribute makes the browser to trigger an HTTP request for getting the image , and you need to wait for the image to be loaded before drawing it. 使用src属性设置图像的来源会使浏览器触发HTTP请求以获取图像 ，并且您需要等待图像加载后才能绘制图像。 Like this: 像这样：

 <!DOCTYPE html> <meta charset="utf-8"> <body> <canvas id="vincent"></canvas> <script> var width = 960; var height = 500; var canvas = document.getElementById('vincent'); var ctx = canvas.getContext("2d"); canvas.width = width; canvas.height = height; var image = new Image(); image.src= "http://monsieurcactus.github.io/LearnElm/starry-night.jpg"; image.onload = function() { ctx.drawImage(image, 0, 0); console.log("done"); } </script> </body>

Note: Here we need an absolute url because this example is being served outside of monsieurcactus.github.io/LearnElm/ 注意：这里我们需要一个绝对URL，因为该示例是在monsieurcactus.github.io/LearnElm/之外提供的

图像未出现在github页面上

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-06-09 02:38:40

图像未出现在github页面上

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-06-09 02:38:40

解决方案1
1 已采纳 2016-06-09 02:38:40