angularjs - 如何在本地存储在 Angular 根文件夹中的 Bootstrap4 Navbar 上显示图像？

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 导航栏上显示本地存储的图像。

标签： angularjsimagebootstrap-4navbar

Answer 1

从您的问题中，我知道您从 maximilian schwarzmü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>