图像未显示在HTML网页上_Html_Css

图像未显示在HTML网页上

html css

图像未显示在HTML网页上,html,css,Html,Css,（*我知道这个问题以前有人问过，但没有其他答案解决我的问题*）我的HTML/CSS/JS页面出现问题，其中没有显示图像。它没有抛出错误，当我运行代码时，其他所有内容都会显示出来。任何帮助都会很好 HTML/JS代码- <HTML> <canvas id = "canvas" width = 480 height = 480> <head> <link rel = 'stylesheet' type = "text/css

（*我知道这个问题以前有人问过，但没有其他答案解决我的问题*）

我的HTML/CSS/JS页面出现问题，其中没有显示图像。它没有抛出错误，当我运行代码时，其他所有内容都会显示出来。任何帮助都会很好

HTML/JS代码-

<HTML>
    <canvas id = "canvas" width = 480 height = 480>
    <head>
        <link rel = 'stylesheet' type = "text/css" href = "main.css">
        <script id = "jqimport" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title> New Web Page </title>


    </head>

    <body onload = "startGame()">
    <img id = "snake" src = "block.png" height = '100' width = '100'>
    <script>

    function startGame() {
    $(document).ready(function() {

    });
    }


    </script>
    </body>
</HTML>

不确定图像显示的确切位置。但是，请尝试以下操作：

您应该将canvas标记放在html的主体中并关闭它。玩转你的#snake图像的CSS属性。如果希望位置显示在画布上或更改left属性，可以将其设置为绝对位置

<HTML>    
<head>
    <link rel = 'stylesheet' type = "text/css" href = "main.css">
    <script id = "jqimport" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title> New Web Page </title>
</head>

<body onload = "startGame()">
<canvas id = "canvas" width = 480 height = 480></canvas>
<img id = "snake" src = "block.png" height = '100' width = '100'>
<script>...


新网页
...

你应该可以看到你的图像。同样，我也不完全清楚您希望将图像放置在何处。

我也尝试过使用css，看看它是否隐藏在画布后面，但这不是

canvas

tag在上面做什么？

document.ready（）

不应该在另一个函数中。@FedericoklezCulloca它做的不多；）@jonah_johnson，请幽默我，通过删除

画布

并将css的第一行修改为

正文来检查它是否有效{

相反。他可能正在使用画布进行游戏。我没有对他试图在画布中绘制的内容做出任何假设。这与他的问题无关@Federicoklezcullocathe's not valid html，你为什么期望它工作？我的意思是，它甚至可能工作，但这就像告诉司机在车道上以200英里/小时的速度行驶。当然，是这样会把你从A点带到B点，但这不是你应该怎么做的！他的画布标签的位置很奇怪。它应该在身体内。也就是说，我知道这两种方法都会起作用。你可以自己试试看。我会编辑答案，以反映更干净的做法。

的位置并不奇怪。完全错了！Th此时此刻“有效”并不重要。对，答案被编辑以解决他的img问题和画布的正确位置。

<HTML>    
<head>
    <link rel = 'stylesheet' type = "text/css" href = "main.css">
    <script id = "jqimport" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title> New Web Page </title>
</head>

<body onload = "startGame()">
<canvas id = "canvas" width = 480 height = 480></canvas>
<img id = "snake" src = "block.png" height = '100' width = '100'>
<script>...