Angular - 无法从组件访问资产（错误 404）答案

【问题标题】：Angular - cant access assets from component (error 404)Angular - 无法从组件访问资产（错误 404）
【发布时间】：2018-05-06 16:31:55
【问题描述】：

当我尝试从资产目录访问文件时遇到问题。

我正在尝试从位于 components/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

在这里您可以看到代码和项目结构。 Screenshot

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

【问题讨论】：

能否请您显示您的相关代码，以便我们知道什么不起作用？与其发布屏幕截图，不如将代码包含在您的帖子中。
@edkeveked 再次检查，帖子已更新，如果您想查看项目结构，请检查屏幕截图
在 MEAN 堆栈中，资产文件夹可以放置在任何位置，具体取决于 grunt 文件或模板设置。你在用咕噜声吗？
您是否在 .angular cli 的“assets”属性中包含了您的资产/img 路径？
@realharry 是的，我做到了，你可以在这里查看pastebin.com/npPA10bv

标签： javascript html angular angular5

【解决方案1】：

尝试使用该位置。我认为它应该有效。

<img src="../../assets/img/test.png" />

app-|
    |
    -components-|(../)
    |           |-navbar-|(../)
    |                    |-navbar.comp.html                           
    |               
    -assets-|
    |       |-img-|
    |             |-test.png

【讨论】：