Angular, image not found (GET 404)

Static resources (images, fonts, json files...etc.) should be added to the assets folder. By default, whatever you put in the assets folder you can access it directly from the browser and queried through an HTTP request:

📦src
 ┣ 📂app
 ┃ ┣ 📂core
 ┃ ┣ 📂shared
 ┃ ┣ 📜app-routing.module.ts
 ┃ ┣ 📜app.component.ts
 ┃ ┣ 📜app.module.ts
 ┣ 📂assets
 ┃ ┣ 📂img
 ┃ ┃ ┗ 📜logo.png // this will be served
 ┣ 📂static
 ┃ ┃ ┗ 📜background.png // this won't be served unless you add it to the assets array
 ┣ 📂environments
 ┣ 📂styles
 ┣ 📜favicon.ico
 ┣ 📜index.html
 ┣ 📜main.ts
 ┣ 📜polyfills.ts

Now if you want to use the logo.png image that is the assets/img folder you can do that like this:

<img src="assets/img/logo.png" alt="logo">   <!-- OK  :)   ->
<img src="static/background.png" alt="logo"> <!-- Not OK :(->

if you want to use the background.png that is inside the static folder, you need to include the static folder in the assets array inside the angular.json file:

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

<img src="assets/img/logo.png" alt="logo">   <!-- OK :) ->
<img src="static/background.png" alt="logo"> <!-- OK :) ->

I like to highlight that is better NOT to :

• use the src/ to reference your static resources (images, ...etc.).
• use the relative paths ../logo.png.

@Parth Ghiya commented the answer to my question. I had to put the image to the /src/assets folder. Angular is now able to find the image.