图像在本地显示，但在托管时不显示

Question

我有一个菜单组件html（src / menu / menucomponent），当在计算机上查看时，该组件会显示主导航文件夹中的图像（src / assets / images / image.png）。然后我有一个在移动设备上显示的sidenav。

代码是：

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

这些图像同时在本地和全局出现。然后我有以下内容：

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

这些图像显示在本地，但是一旦托管在服务器上，就不会显示，但是链接仍然有效。我已经仔细检查了它们是否在同一图像文件夹中，并且它们是正确的图像名称。

有人有什么想法吗？

Answer 1

assets文件夹在编译应用程序时被复制到dist。

因此，您将源更改为：

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

ng serve仍可以在本地测试时找出文件的位置。