Как отобразить изображение на Bootstrap4 Navbar, которое хранится локально в корневой папке Angular? - PullRequest
Новая
       9

Как отобразить изображение на Bootstrap4 Navbar, которое хранится локально в корневой папке Angular?

0 голосов
/ 16 января 2019

Я работаю над своим первым угловым упражнением, в котором мне нужно отобразить изображение на 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>

Я ожидаю отобразить локально сохраненное изображение на панели навигации Bootstrap4 под классом navbar-brand.

1 Ответ

0 голосов
/ 16 января 2019

Из вашего вопроса я знаю, что вы узнали из углового курса Максимилиана Шварцмюллера.

Если вы хотите добавить какие-либо изображения, вам нужно поместить файл в папку assets и получить доступ из ресурсов

в примере

активы / ImageName 

<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>
...