Angular - невозможно получить доступ к активам из компонента (ошибка 404)

У меня проблема, когда я пытаюсь получить доступ к файлу из каталога активов.

Я пытаюсь передать изображение из компонента панели навигации, который находится в файле 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.

Здесь вы можете увидеть код и структуру проекта. Снимок экрана

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

person Josip Reh    schedule 22.11.2017    source источник
comment
Не могли бы вы показать свой соответствующий код, чтобы мы могли знать, что не работает? Вместо того, чтобы публиковать скриншот, лучше включить код в свой пост.   -  person edkeveked    schedule 22.11.2017
comment
@edkeveked проверьте это еще раз, сообщение обновлено, если вы хотите увидеть структуру проекта, проверьте скриншот там   -  person Josip Reh    schedule 22.11.2017
comment
в стеке MEAN папка с ресурсами может быть размещена где угодно в зависимости от настроек файла grunt или шаблона. ты используешь хрюканье?   -  person jatinder bhola    schedule 23.11.2017
comment
Вы включили свой путь актива / изображения в свойство активов в .angular cli?   -  person realharry    schedule 23.11.2017
comment
@realharry да, вы можете проверить это здесь pastebin.com/npPA10bv   -  person Josip Reh    schedule 23.11.2017
comment
@JosipReh Да. Одна вещь, которую вы можете сделать, это попробовать ng build и посмотреть в папке dist, чтобы проверить, действительно ли изображение копируется.   -  person realharry    schedule 23.11.2017
comment
@realharry нет, это не так.   -  person Josip Reh    schedule 23.11.2017
comment
Хорошо, есть хорошая подсказка. Ваш файл angular cli выглядит хорошо для меня. Итак, почему изображение не копируется? Попробуйте поместить изображение в корень src и явно добавить его в файл angular cli и посмотреть, поможет ли это (в качестве первого шага).   -  person realharry    schedule 23.11.2017
comment
хм, полный путь к изображению, например src/test.png?   -  person Josip Reh    schedule 23.11.2017
comment
Да. поместите его в src, а затем добавьте test.png в список ресурсов в . кли файл.   -  person realharry    schedule 23.11.2017
comment
опять же, это не в каталоге dist. Путь к изображению — src/test.png , и я добавил test.png в массив активов.   -  person Josip Reh    schedule 23.11.2017
comment
хм, странно, даже favicon.ico не копируется в каталог dist, я вижу favicon на веб-сайте, но я думаю, это из-за кеша   -  person Josip Reh    schedule 23.11.2017
comment
Это действительно очень странно. Вы можете попробовать ng build --env=prod и посмотреть, будет ли это иметь значение. Или вы можете переустановить @angular/cli и повторить попытку. Я не видел таких проблем. (Может быть, очень простая вещь...)   -  person realharry    schedule 23.11.2017
comment
Я уже переустановил angular-cli и попытался собрать его в производстве, но все равно не работал, но в любом случае спасибо за ваши предложения.   -  person Josip Reh    schedule 23.11.2017
comment
Я скопировал свой проект в другой каталог и запустил сборку ng, и теперь он работает. Я не уверен, почему это произошло, но если кто-то может объяснить, это было бы здорово.   -  person Josip Reh    schedule 23.11.2017


Ответы (1)


попробуй поиграться с локацией. Я думаю, это должно сработать.

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

app-|
    |
    -components-|(../)
    |           |-navbar-|(../)
    |                    |-navbar.comp.html                           
    |               
    -assets-|
    |       |-img-|
    |             |-test.png    
person jatinder bhola    schedule 22.11.2017