Относительный путь для статических файлов, таких как images / css/js и т. д

У меня есть структура папок /src/app/some-module/some-component и src/public/images/user.png. Теперь, когда я хочу показать образ в моем некотором компоненте, я должен дать путь как ../../../public/images/user.png, который кажется слишком наивным и расточительным усилием, когда число образов увеличивается.

Есть ли у нас механизм маршрутизации или относительный путь в angular2 для обслуживания статических файлов. Я использую Angular2 с webpack.

2 4
css angular2-routing static-files

2 ответа:

Это зависит от того, как выглядит Ваш base href.

Например, если у вас есть 

<base href="/src/">

Вы можете легко использовать ниже, независимо от того, где находится ваш шаблон компонента. 

<img src="public/images/user.png" />

Надеюсь, это поможет!!

5

Если вы используете WebPack, он заботится о путях во время сборки. <img src="..."> должен указывать на физическое расположение файла в проекте относительно шаблона, в котором он используется.

Например, в моем случае, без WebPack, это было бы

<img src="img/rhamt-square-248.png" width="172">

Так как img/ находится непосредственно под корнем приложения.

В то время как с WebPack это работает: 

<img src="../../../img/rhamt-square-248.png" width="172">

В противном случае вы получите ошибку компиляции, такую как:

Ошибка в ./ src / app / misc / about.деталь.html
Модуль не найден: ошибка: не удается разрешить './ img / rhamt-square-248.PNG' в '/дома/Ондра/работа/миграции/заводную-веб/UI в/src/главная/веб-приложения/ГРЦ/приложение/смешанная'
@ ./ src / app / misc / about.деталь.html 1: 402-439
@ ./ src / app / misc / about.деталь.ts
@ ./ГРЦ/приложение/приложение.модуль.ts
@ ./ src / main.ts

1