Question

我正在使用以下代码尝试将自己的图像放置到我的个人网站中：

    <!DOCTYPE html>
<html>

    <head>
        <title>My Page</title>
    </head> 
    <body>
        <center>
        <img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
        <h1>My Page</h1>
        <hr />
        <p> To be updated.</p>
        </center>
    </body>

</html>

照片目录与html页面位于同一目录中。我曾尝试将照片放在与html页面相同的目录中，但它不起作用。我尝试使用.JPG而不是.jpg。我尝试执行没有alt标记的代码。我尝试在文件路径中使用反斜杠而不是正斜杠。我在文件名中查找错别字，但没有。我觉得我当前的代码应该没有问题。但是图像绝对不会出现。任何想法或帮助将不胜感激。

编辑：我已经更正了上面的代码，以解决一个基本错误，即将身体放在我的头部内部，而不是将两者分开。图片仍然没有显示。

Answer 1

HTML结构必须为：

<html>
  <head>
  </head>
  <body>
  </body>
</html>

您将body标记放在head标记内。

此外，如果images目录与html位于同一目录，则需要删除第一个斜杠，只需使用photos/mainphoto.jpg

因此您可以尝试：

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <center>
      <img src="photos/mainphoto.jpg" alt="Test Image"/>
      <h1>My Page</h1>
      <hr />
      <p> To be updated.</p>
    </center>
  </body>
</html>

此外，我建议您不要在等号之前或之后使用任何空格，这是很好的做法。

Answer 2

好吧，您的代码就是这样

      <!DOCTYPE html>
    <html>

<head>
    <title>My Page</title>

    <body>
        <center>
        <img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
        <h1>My Page</h1>
        <hr />
        <p> To be updated.</p>
        </center>
    </body>
</head>

</html>

您的<body>元素中有<head>元素。应该是这样

<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <center>
        <img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
        <h1>My Page</h1>
        <hr />
        <p> To be updated.</p>
        </center>
</body>
</html>

对于该图像，地址必须从您的html文件开始。所以如果你有这样的结构

 web/    
  index.html    
  photos/
    cutePuppy.png

您将拥有<img src="photos/cutePuppy.png" alt="Cute puppy">

Answer 3

尝试使用其属性中列出的图像的完整路径。

Answer 4

已修复

在Windows 10文件系统中，图片文件扩展名显然被隐藏了。我将图片命名为“ mainphoto.jpg”，但没有意识到Windows 10文件系统已经自动添加了.jpg扩展名，该扩展名隐藏在文件结构中。因此，所引用文件的名称实际上是“ mainphoto.jpg.jpg”。

为您的愚蠢错误致歉，并感谢所有提供建议的人！

Answer 5

它是否在您使用的浏览器的Web检查器中显示为404（未找到）。可能是带有图像的文件夹以及可能带有图像本身的文件夹没有足够大的权限来允许访问。您将必须通过终端或在正在使用的编辑器（IDE）中更改权限。

HTML图像不会出现

5 个答案: