角度：无法加载图像：404（未找到）

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

尝试使用/ like /images/logo.svg开始您的图像源链接

Answer 3

当文件夹即图像和index.html文件在同一目录中时，路径应以./

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

Answer 4

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.

Answer 5

我不知道您在资产目录中真正拥有什么，但尝试将所有静态文件（如 css 和图像）放入资产目录中。

Answer 6

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.