图像在本地出现但在托管时不出现

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在本地测试的时候还是可以搞清楚文件在哪的。

图像在本地出现但在托管时不出现

Images appearing locally but not when hosted

html

angular

src