CODEWITHSUNDEEP
htmlcssangular
Ayush Naik
Ayush Naik

Reputation: 111

Image Not Loading in Angular 9

HTML File :

<div>
<img src="/src/assets/img/menu.png" alt="LOGO">
</div>

Here the New-Google-Logo.png is in the same folder as in the html file. But after ng serve the html page loads with other details, but not the image. Tried by directly giving a link for an image (like www.google.com/images/x.png), it works, but local file is not loading.

Folder Tree :

src
  -assets
    -img
              - menu.png

Here's how it looks :

Image path is correct, I have also added static assets in assets folder which angular-cli serves with default .angular-cli.json

"assets": [
              "src/favicon.ico",
              "src/assets"
            ]

Is there any thing i am missing?

Edit 2: I get this error in console GET localhost:4200/src/assets/img/menu.png 404 (Not Found)

Upvotes: 1

Views: 8169

Answers (2)

Ayush Naik
Ayush Naik

Reputation: 111

After several tries I got it. Since the assets are configured to sit in src/assets

"assets": [
              "src/favicon.ico",
              "src/assets"
            ]

This is how you should add the path:

<div>
<img src="./assets/img/menu.png" alt="LOGO">
</div>

Upvotes: 3

Kl3jvi
Kl3jvi

Reputation: 135

1.You can try to stop the nodejs server, then change the name of the file to a new one. 2.You can double check the extension of the image if it is .png .jpeg or smth. 3.I would suggest slowly and manually writing the path of the image in your IDE so it can autofill the path of the image.

Upvotes: 0

Related Questions