Angular:无法加载图片:404(未找到)

时间:2018-06-01 19:17:06

标签: html css json bootstrap-4

我下载this free theme以便在WebStorm中的角度项目中使用它,但我收到此错误:
 Failed to load resource: the server responded with a status of 404 (Not Found) 即使路径正确,也不会加载图片。谁能帮助我?

这是代码的片段:

 <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:我确实在加载CSS和JavaScript文件方面遇到了问题,但我已经通过在css链接中添加type =“text / html”并在其中输入type =“application / json”来解决它们JavaScript链接。你认为它可能是一个JSON问题吗?

6 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

我通过将图像放入Angular的assets文件夹中解决了此问题。以前,我将它们放入app文件夹中,并且也出现404错误,但是放入assets中解决了我的问题。所以我像这样使用它们:

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

答案 2 :(得分:1)

您必须在Architect> build> options> Assets中的angular.json中添加路由:

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

此后,您必须停止它并重新启动您的应用。

答案 3 :(得分:0)

我不知道你在资产目录中有什么,但是尝试将所有静态文件如css和images放入资产目录。

答案 4 :(得分:0)

尝试使用9,3 16,10 15,6 [snipp lots of values] 13,14 13,7 20,4 /

开始您的图像源链接

答案 5 :(得分:0)

答案在这里:您必须在architect> build> options> Assets中的angular.json中添加路由:

“资产”:[“ src / favicon.ico”,“ src /资产”,“ src /图像”]

此后,您必须停止它并重新启动您的应用。

伊凡·戈麦斯(Ivan Gomez)的

可能是正确的答案。这为我工作了100%。映像目录不起作用的真正原因是,角度目录没有将其注册为资产代理。将图像添加到资产文件夹中也是正确的,但是如果您想使用自己的图像文件夹来保存图像,则需要按照Ivan的指示将其添加到angular.json文件中。