-1

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

header-component.html

<div class="col-md-4 text-left">
  <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?

Irakli925
  • 17
  • 1
  • 4
  • Try adding the image's directory path in angular.json's assets array and then use the image name just like 'assets/images-name.png' – Krishna May 20 '22 at 10:31
  • try to find real link where the logo is working, and check the real url – Seti May 20 '22 at 10:31
  • Do you have any error in console? Have you added in the `assets` array in your `angular.json` file the path to that image's folder? – Jacopo Sciampi May 20 '22 at 10:34
  • @JacopoSciampi Yes, assets are added in angular.json. I have an error "GET http://localhost:4200/images/header/Linkedin.png 404 (Not Found)" – Irakli925 May 20 '22 at 10:45

2 Answers2

0

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"
 ],
Max Tuzenko
  • 1,051
  • 6
  • 18
0

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

tony
  • 834
  • 5
  • 10