изображение в папке ресурсов недоступно в приложении Angular

Question

Это структура профиля моего приложения angular6:

Client.component.html должен отображать изображение "defaultProfilePic.png".

Таким образом, он содержит следующую строку кода:

<img [src]="url"  width="220" height="200">

Client.component.ts содержит следующую строку кода:

private url = "../asset/images/defaultProfilePic.png";

По некоторым причинам этоне работаетКто-нибудь знает, почему это может быть?

Answer 1

Да, проблема в том, что вы создали свой собственный каталог и пытаетесь обслуживать изображения из него.
вам следует использовать папку assets для хранения статических ресурсов, изображений и т. Д.

если вы хотите хранить изображения и статические ресурсы в другом каталоге, вам нужно сообщить об этом CLI, сделав запись в массиве assets файла angular.json, и вам нужно убедиться, что он находится на том же уровне, что и assets папка.то есть создайте пользовательскую папку в приложении

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

Еще одна ошибка с вашей стороны: private url =

Все свойства databound должны быть напечатаны public свойство.

почему? См. Это

, и вы можете указать абсолютный путь вместо относительного пути, поскольку CLI знает об этом

public url = "asset/images/defaultProfilePic.png";

Answer 2

Это звучит так, как будто ваш путь не правильный, попробуйте добавить еще один ../ и убедитесь, что у вас есть следующие настройки в .angular-cli.json

 "assets": [
        "assets",
        "favicon.ico"
      ],