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

Question

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?

Answer 1

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

Answer 2

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.