CODEWITHSUNDEEP
htmlangular
Leonzen
Leonzen

Reputation: 1275

Angular, image not found (GET 404)

I'm at the moment trying to embed an image to my angular project but I'm getting an error that the immage can not be found.

GET http://localhost:4200/logo.svg 404 (Not Found)

I have tried to embed the image with the standard method just like this

<img src="../logo.svg">

I have checked the source and also tried other file formats.

Upvotes: 21

Views: 72126

Answers (13)

Lenntox
Lenntox

Reputation: 75

In the newest version of Angular (v18) you can just add the image files to the "public" directory in your Project and then reference them like so:

<img src="example.png" alt="img">

Upvotes: 4

Petro Kozlov
Petro Kozlov

Reputation: 81

solution

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

just add full path

Upvotes: 0

Tugberk Toy
Tugberk Toy

Reputation: 1

If you have tried all the solutions in the comments and still haven't found a solution, try this:

if your assets folder is in your app folder like this. /src/app/assets/img/... Try extracting the assets folder from the app folder. Your path is like this:

/src/assets/img/...

But in angular, you don't need to type '/src'. Just type this:

/assets/img/...

Upvotes: 0

Tourneux
Tourneux

Reputation: 31

I added a new folder and angular does not find my images.

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

So, I deleted the folder: .angular and restart the build with ng serve.

Upvotes: 1

Benzara Tahar
Benzara Tahar

Reputation: 2205

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.

Upvotes: 19

Marcelo Silva
Marcelo Silva

Reputation: 69

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

Upvotes: 1

moises
moises

Reputation: 1

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"
        ],

Upvotes: 0

murali_cse
murali_cse

Reputation: 11

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

Upvotes: -2

hawran
hawran

Reputation: 228

The solution from Brian worked for me

SOLUTION (take out the src)

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

Upvotes: -1

Brian Sanchez
Brian Sanchez

Reputation: 918

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!"..

Upvotes: 6

asifaftab87
asifaftab87

Reputation: 1443

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

Upvotes: 4

Leonzen
Leonzen

Reputation: 1275

@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.

Upvotes: 22

Raz Zelinger
Raz Zelinger

Reputation: 706

Let's say you are at your app.component.html if you want to use a picture from your src folder use:

<img src="../../src/logo.svg">

Each ../ takes you one folder up

Upvotes: 3

Related Questions