圖像未顯示在 HTML 網頁上

Question

(* 我知道這個問題以前在堆棧上有人問過，但沒有其他答案解決了我的問題 *)

我的 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>

CSS 代碼 -

#canvas {
    border: 1px solid black;
    background-color: #888888;
    position: relative;

}

#snake {
    position: relative;
    left: 400px;

}

Answer 1

不確定您希望圖像顯示的確切位置。 但是，請嘗試以下操作：

您應該將畫布標簽放在 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>...

你應該能夠看到你的圖像。 同樣，我不完全清楚您想要放置圖像的位置。

圖像未顯示在 HTML 網頁上

問題描述

1 個解決方案

解決方案1
0 2017-11-28 16:23:58

圖像未顯示在 HTML 網頁上

問題描述

1 個解決方案

解決方案1 0 2017-11-28 16:23:58

解決方案1
0 2017-11-28 16:23:58