图像未加载到 Angular 9

Question

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)

Answer 1

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>

Answer 2

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.