Images appearing locally but not when hosted

I have a menu component html (src/menu/menucomponent) that exhibits images from a folder (src/assets/images/image.png) for the main nav when being viewed on a computer. Then I have a sidenav that is shown when on a mobile device.

The code is :

    <div id='main'>
<span class="hamburger" *ngIf="isMobile" (click)="openNav()">&#9776;</span>
<a  href=".#/welcome"*ngIf="!isMobile"class='menu'><img src ="../assets/images/Home.png"></a>
<a  href=".#/aboutme"*ngIf="!isMobile"class='menu'><img src ="../assets/images/About.png"></a>
<a href=".#/projects"*ngIf="!isMobile"class='menu'><img src ="../assets/images/Projects.png"></a>
<a  href=".#/contactme"*ngIf="!isMobile"class='menu'><img src ="../assets/images/Contact.png"></a>
<a  href=".#/subscribes"*ngIf="!isMobile"class='menu'><img src ="../assets/images/Subscribe.png"></a>

These images appear both locally and globally. Then I have the following:

   <div id='mySidenav' class='sidenav'*ngIf="isMobile">
  <a href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a>
  <a href=".#/welcome" >Home</a>
  <a href=".#/aboutme" >About Me</a>
  <a href=".#/projects" >Projects</a>
  <a href=".#/contactme" >Contact</a>
  <a href=".#/subscribes">Subscribe</a>
    <a href='link1' class="tag"><img src="../assets/images/Image1.png"></a>
  <a href='link2' class="tag"> <img src="../assets/images/Image2.png"></a>
<a href='link3' class="tag"> <img src="../assets/images/Image3.png"></a>
 <a href='link4' class="tag"><img src="../assets/images/Image4.png" ></a>

These images appear locally but once hosted on a server, do not show, but the links still work. I have double-checked that they are in the same images folder and that they are the right image names.

Does anyone have some ideas?

Solution

The assets folder is copied to the dist when you compile the app.

So, you change your sources to:

<img src="./assets/images/Image1.png">

The ng serve can still figure out where the files are when you are testing locally.