In the header component, I needed to add a logo image, so I wrote the following in HTML:

header-component.html

<div >
  <a routerLink="/">
      <img id="logo" src="../images/header/Logo.png"
        alt="logo"/>
  </a>
</div>

But browser can not see the logo, it just shows the default picture image. I checked it with the system administrator, there are no network problems. Can anyone help?

CodePudding user response：

Does not work because your own resource providers has to be included in angular.json, assets is included by default, why are you separating images from assets? Just create images folder inside assets and call it like assets/images/logo.png

CodePudding user response：

To make file publicly available in angular you have to place it it assets folder. Also bear in mind that in Angular projects, you don't have to add the relative to assets folder. In your case "assets/images/header/Logo.png" will be enough.

You can relocate your assets folder in angular.json if needed

"assets": [
    "src/assets"
 ],