Question

我正在使用记事本++作为初学者。我在保存代码的文档中创建了一个父文件夹，在该文件夹中创建了一个子文件夹来存储图像。

下面是我正在使用的代码

 <section>
     <img src="img/vietnam.jpg"
</section>

为什么不显示？我在子文件夹：S

中将图像命名为vietnam.jpg。

Answer 1

这里的问题可能是因为您没有走到正确的图像生存路径。例如，如果您的html文件包含在与img文件夹处于同一级别的文件夹中，则应添加../才能进入一个级别，然后指定要获取的文件夹进入img文件夹。

例如：

<section>
  <img src="../img/vietnam.jpg" alt="vietnam">
</section>

    /   = Root directory
    .   = This location
    ..  = Up a directory
    ./  = Current directory
    ../ = Parent of current directory
   ../../ = Two directories backwards

Answer 2

如果您的HTML源文件（例如index.html）位于文件夹c：\ Users \ Patricia \ Documents \ adv中，那么由于img文件夹是\ adv的子文件夹，那么以下内容应适用。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <section>
      <img src="img/vietnam.jpg" alt="vietnam">
    </section>
  </body>
</html>

HTML源父文件夹的路径是什么？

Answer 3

好吧，首先，我建议您切换代码编辑器（例如，切换到VisualStudio代码，因为它是业内广泛使用/首选的编辑器之一。当然，还有其他诸如WebStorm之类的Editor / IDE）。基本上，只要有了正确的插件/配置，您就可以迅速成为超级英雄。例如，查看下面的屏幕。我在VisualStudio中使用了相对路径，它显示了您当前所在的当前路径。enter image description here

Answer 4

您错过了img-tag的右括号，导致无效的html无法正确显示

看看示例https://www.w3schools.com/tags/tag_img.asp

<img src="/img/vietnam.jpg" >

HTML5图片不会显示

4 个答案: