html - 导航栏图标图像未显示

Question

我在让我的图标显示在导航栏中时遇到了一些问题。 它只是求助于 alt 而不是显示下面的图像:

我设法通过随机改变边距来非常神秘地让它工作。不知道我做了什么让它起作用。

重启服务器，问题又出现了。

感谢任何帮助。

更新:文件本身似乎不适用于此代码。使用相同代码和目录/图像主机的所有其他类似图像都可以正常工作。

body {
  background: url('redpattern.jpg') no-repeat center fixed;
  background-size: 2900px 1000px;
/*  color: #333333;*/
  margin-top: 5rem;
}


h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

ul {
  margin: 0;
}


bg-steel {
  color: #b52525;
}

.site-header .navbar-nav .nav-link {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link:hover {
  color: #208ee8;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 5500;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  ;
}

a.article-title:hover {
  color: #418ac9;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top" style="background-color:#660000;">
    <div class="container" id="topnavbar">
      <a class="navbar-left mr-4" href="{% url 'blog-home' %}">
        <img src="logo.png" width="200" height="100" alt="image"/></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarToggle">
        <div class="navbar-nav mr-auto">
          <a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
          <a class="nav-item nav-link" href="{% url 'blog-rules' %}">Rules</a>
          <a class="nav-item nav-link" href="{% url 'about' %}">About</a>
        </div>
        <!-- Navbar Right Side -->
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
          <a class="nav-item nav-link" href="{% url 'register'%}">Register</a>
        </div>
      </div>
    </div>
  </nav>

Answer 1

你需要将图像文件放在 project_directory/static 然后在导航栏中使用

{% load static %} 
<img src="{% static 'logo.png' %}" width="200" height="100" alt="image"/></a>