Question

我正在进行第一次Angular练习，我必须在Bootstrap4 Navbar上显示图像，但是由于某种原因，它无法显示本地存储在根目录下的图像。我拍了一些代码和显示页面的屏幕截图。非常感谢您的帮助。

我尝试更改图像路径。它非常适合在线图像。因此，我认为自己的道路出现问题或需要解决的问题。

<nav class="navbar navbar-expand-lg navbar-light bg-blue">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="logo.png" alt="logo">
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a href="#" class="nav-link">Recipe</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Shopping</a>
        </li>
      </ul> 
      <ul class="navbar-nav navbar-right">
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Save</a>
            <a class="dropdown-item" href="#">Fetch</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

我希望在navbar-brand类下的Bootstrap4 navbar上显示本地存储的图像。

Answer 1

从您的问题中，我知道您是从maximilianschwarzmüller的角向过程中学到的。

如果要添加任何图像，则需要将文件放在资产文件夹中并从资产中访问

例如

资产/图像名称

<nav class="navbar navbar-expand-lg navbar-light bg-blue">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="assets/imageName" alt="logo">
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a href="#" class="nav-link">Recipe</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Shopping</a>
        </li>
      </ul> 
      <ul class="navbar-nav navbar-right">
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Save</a>
            <a class="dropdown-item" href="#">Fetch</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

如何在本地存储在Angular根文件夹中的Bootstrap4导航栏上显示图像？

1 个答案: