Question

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

我尝试从位于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

在这里您可以看到代码和项目结构。 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" />

Answer 1

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

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

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

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

1 个答案: