静态文件的相对路径，如图像/ css/js等

Question

我有/src/app/some-module/some-component和src/public/images/user.png的文件夹结构。现在，当我想要在我的某个组件中显示图像时，我必须给路径指定../../../public/images/user.png，一旦图像数量增加，这似乎是太天真和浪费的努力。

我们是否在angular2中有适当的路由机制或相对路径来提供静态文件。我正在使用带有webpack的Angular2。

Answer 1

这取决于你的base href的样子。

对于e.g如果你有

<base href="/src/"> 

你可以很容易地使用下面不论您的组件模板。

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

希望这有助于！

Answer 2

如果使用WebPack，它会在构建期间处理路径。 <img src="...">需要指向项目内文件的物理位置，相对于使用它的模板。

举例来说，在我的情况下，没有的WebPack，这将是

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

因为img/直接为应用程序根目录下。

而使用的WebPack，这个工程：

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

否则你会得到一个编译错误等类

ERROR in ./src/app/misc/about.component.html
Module not found: Error: Can't resolve './img/rhamt-square-248.png' in '/home/ondra/work/Migration/windup-web/ui/src/main/webapp/src/app/misc'
@ ./src/app/misc/about.component.html 1:402-439
@ ./src/app/misc/about.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts