Image is not found in Angular application

I got an image in my angular app.

I'll try to embed it as an image:

<img src="assets/images/flag.png" alt="Flag of Germany" />

At the browser it is not shown and I get the below error:

http://localhost:4200/assets/images/flag.png 404 (Not Found)

When I put the path at the browser, it is also not available.

http://localhost:4200/src/assets/images/flag.png http://localhost:4200/assets/images/flag.png

The images are working, I can open it through the explorer.

I adjust my angular.json like this: (for test and build)

        "assets": [
          {
            "glob": "**/*",
            "input": "public"
          },
          {
            "glob": "**/*",
            "input": "src/assets"
          },
          {
            "glob": "**/*",
            "input": "src/assets/images"
          }
        ],

I did restart the app and no differences happened.

I also checked this thread, but I can't find a solution:

Angular, image not found (GET 404)

Do you got a idea why the image is not available or what I could try?

While working on this, the most important thing I noted was that we should not specify the root path (/src/assets/images) with the /src, instead src/assets/images.

Using the below configuration I was able to get it working.

        "assets": [
          {
            "glob": "**/*",
            "input": "public"
          },
          {
            "glob": "**/*",
            "input": "src/assets"
          }
        ],

After running the build, the entire assets folder, is copied to the root folder so the structure will be.

dist
|-> test
    |-> browser
        |-> images
            |-> test.png

Now, we just need to specify the path, with the prefix images since, the images folder is placed in the root of the project. So our HTML will look like:

<img src="/images/test.png" alt="Flag of Germany" />