Image is not found in Angular application

Question

I got an image in my angular app.

enter image description here

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?

Answer 1

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" />

• Eliseo: by defect Angular create an assets folder in the same place the .html is, so should be: src=assets/images/test.png (in angular.json you can indicate the "output")
• Naren Murali: @Eliseo Angular 19 is different the assets are on the root folder
• Frank Mehlhop: @NarenMurali Thank you, you're right. I delete the "/assets" and it works fine.
• Eliseo: @Naren, Thanks for the information!!! ( I've some time out of Angular).
• Naren Murali: @Eliseo no problem