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.

For me size was the only problem. When I changed size now it is displaying My image path /src/assets/images/products/white.jpg

my image url is : /assets/images/products/white.jpg

ERROR

<img src="src/static/images/logo.png" alt="" width="49" height="35">

SOLUTION (take out the src)

<img src="static/images/logo.png" alt="" width="49" height="35">

be happy and "welcome to the scatman's world!"..

I had the same error and I understood that you can update angular.json in assets property. In my case, I added "src/img" for get a new folder position and works fine.

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

This works for me.

in angular.json add the path in assets. Example below.

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

in the component.html you add this

  <img [attr.src]="'assets/images/logo.png'" alt="logo">

The solution from Brian worked for me

SOLUTION (take out the src)

<img src="static/images/logo.png" alt="" width="49" height="35">

First you need to add image in /src/assets/ folder. Then type like this.

This is works for me!

htmlfile.html

<img src="assets/image/imageName.jpg" >