Q:

How to display image on Bootstrap4 Navbar which is stored locally in Angular root folder?

I am working on my first Angular exercise where I have to display an image on Bootstrap4 Navbar but somehow it is not been able to display an image which is stored locally on the root. I took a couple of screenshot of my code and display page. I would really appreciate your help.
I have tried to change the image path. It works with the online image very well. Thus, I believe something went wrong with my path or something that I need to figure out yet. 
<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>

I expect to display locally stored image on Bootstrap4 navbar under navbar-brand class. 

A:

From your question, i know you learnt from maximilian schwarzmüller's angular course.
if you want to add any images, you need to put file in assets folder and access from the assets 
in example, 

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>

