Google Chrome 上的 HTML 不显示我的图片答案

【问题标题】：HTML on Google Chrome doesn't show my imageGoogle Chrome 上的 HTML 不显示我的图片
【发布时间】：2019-10-08 11:44:07
【问题描述】：

尝试在浏览器中查看 index.html 文件时，它不显示任何图像。我得到一个损坏的图像图标。

我检查了页面并收到以下错误：

加载资源失败：net::ERR_FILE_NOT_FOUND

图像位于主文件夹（即测试站点）中的图像文件夹（即图像）中

我尝试了多种浏览器：Firefox、Chrome、Internet Explorer..

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

<body>
  <img src="\test-site\images\japanese.png" alt="My test image">
</body>

</html>

我正在尝试显示此图像。但是，损坏的图像图标显示但没有图像...

错误：加载资源失败：net::ERR_FILE_NOT_FOUND

【问题讨论】：

您确定您访问的文件路径正确吗？更改文件路径以使用正斜杠 / 而不是反斜杠 `\`，然后重试。
看来你的路径不对。试试这样的./test-site/images/japanese.png 并确保您没有输入任何错误。
@AminuKano 提到了斜线。这是基于 Windows 或 *nix 的网络服务器吗？图像的本地路径也可能与图像的主机路径不同。
反斜杠和正斜杠都有效，./test-site/ 也无效.....这是一个Windows系统（忘了提）
尝试从资源管理器打开图片到浏览器，如果成功了，肯定会在index.html中显示图片

标签： html image google-chrome

【解决方案1】：

使用相对路径。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

<body>
  <img src="./test-site/images/japanese.png" alt="My test image">
</body>

</html>

【讨论】：

【解决方案2】：

如果 index.html 文件位于 test-site 文件夹（主文件夹）中，那么您无需将其包含在链接中：

 <img src ="./images/japanese.png" alt ="My test Image">

应该适合您，因为点代表您已经在其中的文件夹。

【讨论】：

【解决方案3】：

如果 index.html 文件位于 test-site 文件夹（主文件夹）中，那么您无需将其包含在链接中：

它应该适合你

【讨论】：

图像位于主文件夹内的我的图像文件夹中.. index.html 也在主文件夹中
好的。所以您需要确保放置正确的路径，但只需在开始任何路径之前放置 ..。

【解决方案4】：

如果你的图片和 index.html 在同一个文件夹中，那么

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
    </head>

    <body>
      <img src="./images/japanese.png" alt="My test image">
      <!-- or  ->
      <img src="images/japanese.png" alt="My test image">
 
    </body>

    </html>

【讨论】：

这些都不起作用，检查拼写和所有拼写都是一样的
更正：这行得通，不知道我对此做了什么不同（在尝试你们所有的建议时都是一样的！）