Question

我正在尝试学习HTML5，我在html中编写了一个代码来显示图像。

以下是代码段：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>imageDemo.html</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>This is Pacman Ghost</h1>
        <p>
        <img src="Pacman.png" alt="Pacman Ghost" />
        </p>
    </body>
</html>

我的图片Pacman.png在桌面上，我的test.html文件也在桌面上。我在ubuntu 14.04中使用gedit来编写代码。当我运行我的文件test.html时，我看不到图像，但看到Pacman Ghost为文本。

我在这里做错了什么？

希望很快能听到你们的消息。

由于

Answer 1

您写道，您的图片在桌面上。您使用相对路径。因此，最好的方法是创建一个文件夹并将所有文件放在该文件夹中。

您的代码看起来不错，但我认为您的图片位置错误。

您应该查看文件的区分大小写。

使用Chrome或Firefox中的调试栏，然后转到网络以查找问题并查看代码是否未加载。

解决方案删除文件名和.png扩展名之间的空格。

https://developer.chrome.com/devtools

Answer 2

尽量不要关闭标签并添加图像的高度和宽度。

<img src="Pacman.png" alt="Pacman Ghost" style="width:100px;height:100px" >

同时检查文件名是否正确。它可能无法找到你的Pacman.png。尽可能尝试使用绝对链接。

编辑： ubuntu的绝对路径：

<img src="/home/(your user name)/Desktop/Pacman.png" alt="Pacman Ghost" style="width:100px;height:100px" >

html5 img没有在gedit中显示

2 个答案: