Question

我正在尝试通过.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

Answer 1

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

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

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

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

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

Answer 2

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

Answer 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，请按照先前答案中的建议检查文件路径

Answer 4

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

Answer 5

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

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

5 个答案: