![](/img/trans.png)
[英]Angular 4.1.0 in Plunker: adding component returns 404 XHR Error
[英]Angular - cant access assets from component (error 404)
我尝试从资产目录访问文件时遇到问题。
我正在尝试从位于Components / navbar中的navbar组件提供图像。 图像位于assets / img目录中。
Browser throws an error http://localhost:4200/assets/img/test.png (404) not found
我正在使用angular 5,Angular CLI 1.5和Node:6.10.3
在这里,您可以查看代码和项目结构。 屏幕截图
navbar.component.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" routerLink="/">No Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a routerLink="#">Pitanja<span class="sr-only">(current)</span></a></li>
<li><a routerLink="#">Oznake</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" *ngIf="isLoggedIn == true">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{user.username}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a routerLink="/user/{{user.username}}">My profile</a></li>
<li><a routerLink="#">Settings</a></li>
<li role="separator" class="divider"></li>
<li><a routerLink="#" (click)="logout()">Logout</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" *ngIf="isLoggedIn == false">
<li><a routerLink="/login">Login</a></li>
<li><a routerLink="/register">Register</a></li>
</ul>
</div>
</div>
</nav>
<img src="assets/img/test.png" />
尝试使用该位置。 我认为应该可以。
<img src="../../assets/img/test.png" />
app-|
|
-components-|(../)
| |-navbar-|(../)
| |-navbar.comp.html
|
-assets-|
| |-img-|
| |-test.png
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.