CODEWITHSUNDEEP
htmlcssjsonbootstrap-4
chimchim
chimchim

Reputation: 45

Angular : Failed to load images: 404 (Not Found)

i download this free theme in order to use it in my angular project in WebStorm but i get this error :
Failed to load resource: the server responded with a status of 404 (Not Found) and no image is loaded even if the path is right. can anyone help me with that?

here is a snippet of the code:

 <a class="navbar-brand brand-logo" href="index.html"><img src="images/logo.svg" alt="logo"/></a>
      <a class="navbar-brand brand-logo-mini" href="index.html"><img src="images/logo-mini.svg" alt="logo"/></a>

What i get

Directory tree structure

PS: i did have problems with loading CSS and JavaScript files but i'v already solved them by adding type="text/html" in css links and type="application/json" in JavaScript links. do you think it can be a JSON problem?

Upvotes: 3

Views: 14969

Answers (7)

ramonbatalha
ramonbatalha

Reputation: 1

"So, I solved my problem by adding this part to my code:

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

My directory structure is:

src/ assets/ images/ carousel/ image_1.webp image_2.webp image_3.webp

Upvotes: 0

Chaster johnson
Chaster johnson

Reputation: 173

The answer here: You have to add the route in angular.json in architect > build > options > assets:

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

After this you have to stop it and relaunch you app.

from Ivan Gomez is likely the true right answer. This worked 100% for me. The real reason the image directory did not work was that angular did not have it registered as an asset driectory. Adding the image to the asset folder is also correct, but if you want your own image folder to hold images you need to add it to the angular.json file as Ivan directs.

Upvotes: 1

Iv&#225;n G&#243;mez
Iv&#225;n G&#243;mez

Reputation: 21

You have to add the route in angular.json in architect > build > options > assets:

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

After this you have to stop it and relaunch you app.

Upvotes: 2

Konstantin Kozirev
Konstantin Kozirev

Reputation: 1272

I solved this issue by placing images into assets folder of Angular. Previously I placed them into app folder and had 404 error too, but placing into assets solved my issue. So I use them like:

<img src="assets/images/intro_room.jpg" alt="Intro Gallery Room Sample Pictures">

Upvotes: 4

WasiF
WasiF

Reputation: 28939

When a folder i.e. images and index.html file are in same directory, then the path should start with ./

<img src="./images/logo-mini.svg" alt="logo"/>

Upvotes: 1

cassmtnr
cassmtnr

Reputation: 947

Try starting your image source link with / like /images/logo.svg

Upvotes: 1

Alan Grosz
Alan Grosz

Reputation: 1325

I don't know what you really have in assets directory, but try to put all static files like css and images into assets directory.

Upvotes: 0

Related Questions