为什么我的 .png 网站徽标文件不会显示在我的网站上？答案

【问题标题】：Why will my .png website logo file not show up on my website?为什么我的 .png 网站徽标文件不会显示在我的网站上？
【发布时间】：2023-03-26 04:30:01
【问题描述】：

我正在尝试通过.png 文件为我的网站创建自定义徽标，只要我输入代码并通过本地主机测试运行它，该文件就不会显示徽标图像。

重命名.png 文件
检查拼写
检查大小写
尝试在中间添加“-”（“holyland-logo.png”）
尝试添加棕色（“images/brown-holylandlogo.png”）

<html>

<head>
  <title>HolyLand Souveniers</title>

  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="top-nav-bar">
    <div class="search-box">
      <img src="images/holylandlogo.png" /> (This is causing the issue)
      <input type="text" class="form-control">
      <!--This is a search box -->
      <span class="input-group-text"><i class="fa fa-search"></i></span>
      <!--Search Icon -->
</body>

</html>

我希望徽标出现在网站的左上角，但它没有做任何事情吗，它只是给我一个没有 .png 徽标图片的 X。My file pathing and folders as requested in the comments

【问题讨论】：

您的文件/文件夹结构是什么？您用于访问该网站的 URL 是什么？
Chrome 调试控制台对此问题有何看法？

标签： html image

【解决方案1】：

如果您没有在图像 URL（相对路径）的开头放置 /，则服务器希望在您的索引点 (index.html/php) 旁边有图像文件夹，但如果您在它尝试从 Apache/nginx 的根目录开始（绝对路径）。只是为了澄清。

在您的情况下，这意味着您需要确保图像的文件夹位于您的 index.html 或 index.php 旁边。

另一个提示：避免 HTML 中 = 之间的空格，并将您的样式放在外部样式之后，以防您想要覆盖其中的某些部分。

但请向我们提供有关您的环境的更多信息，以便我们提供更好的帮助：

您的网站托管在哪里（本地/提供商）
您尝试访问或归档的 URL 是什么
您的文件夹结构
您的设置（操作系统、apache/nginx、PHP...）

【讨论】：

1.如果这是一个足够好的答案，我通过 xampp 使用 localhost:8080，我对这些东西相当陌生。
2. localhost:8080/webtech/coursework/Personal%20Website/… （我这不能被你打开，但它只是一个例子）
3.这台电脑 > USB 驱动器 (D:) > CTI 110 > XAMPP > htdocs > webtech > coursework > 个人网站
apollo.waketech.edu/~smbannoura2/Holylandsouvenirs.html（如果你想访问该网站，我使用我的学校主机。）我使用 Windows 10
我添加了一个 / 但我仍然没有得到徽标图像，我不知道该怎么做。我将文件图像添加到任何人都可以查看。

【解决方案2】：

根据您的屏幕截图，HTML 文件和 PNG 文件位于同一文件夹中，因此您的文件路径错误：在 img 标签中，而不是 src="images/holylandlogo.png" 只需写 src="holylandlogo.png" 。

【讨论】：

【解决方案3】：

我点击了您的公共链接并查看了我的 Chrome 控制台日志：

加载资源失败：服务器响应状态为 404（未找到）

以下资源：

style.css
holylandlogo.png
favicon.ico

https://apollo.waketech.edu/~smbannoura2/holylandlogo.png 显示图片，所以

<img src="holylandlogo.png">

应该适用于您的 html 页面。

对于 style.css 和 favicon.ico，请按照之前答案中的建议检查文件路径

【讨论】：

【解决方案4】：

我通过添加 <img src="holylandlogo.png"> 而不是原来的 <img src="images/holylandlogo.png" /> 解决了这个问题，因为我在同一个文件中有徽标。感谢 Esdee 评论中的回复。有关更多详细信息，您可以在整个帖子中阅读我尝试过的其他内容。

【讨论】：

谢谢正是我上面写的...为了使事情正常进行，您需要将图像放在图像文件夹中。不要忘记通过单击勾号将他的评论标记为已解决。

【解决方案5】：

您需要将带有图像的图像文件夹放入您网站的源文件中。否则，请使用图片的原始网站链接

【讨论】：