如何到达公共目录

Question

我在我的项目中使用angular-cli,我想使用全局图像 - 我的网站徽标图像.

据我所知,public项目根目录(angular-cli创建)的目录是公共资产 - 这似乎是放置我的形象的好地方(如果我错了请纠正我).

但是,当我尝试在我的<img src="/public/book4u-logo.svg" />标签中找到该图像时,我得到404.原因是,当然,我的项目根目录是src目录而不是项目根目录.

那么,我应该如何进入该目录？或者我应该将我的图像放在另一个目录中？

我的项目树(我删除不必要的后缀):

.
??? angular-cli-build.js
??? angular-cli.json
??? package.json
??? public
?   ??? book4u-logo.svg
?   ??? hero-image-default.jpg
??? src
?   ??? app
?   ?   ??? bfy.component.html
?   ?   ??? bfy.component.scss
?   ?   ??? bfy.component.ts
?   ?   ??? environment.ts
?   ??? favicon.ico
?   ??? index.html
?   ??? main.ts
?   ??? system-config.ts
?   ??? tsconfig.json
?   ??? typings.d.ts
??? tslint.json
??? typings.json

该img标签是在/src/app/bfy.component.html和图像本身是/public/book4u-logo.svg.

Answer 1

将Angular-cli所有文件放在/dist目录中.

要在index.html中显示图像: <img src="book4u-logo.svg" />

如果你想在你的应用程序中使用你的图像,你应该使用目录中的文件夹,/src如src/shared/assets/img/book4u-logo.svg

公用文件夹用于公共资源,内容将复制到该/dist文件夹.但是,在运行文件夹中ng build --prod的javascript时/public不会复制到/dist.

Github上有一个未解决的问题:静态JS资产没有复制 可以从dist文件夹中访问放置在公共文件夹中的图像.

Answer 2

最新版本的angular-cli(angular-cli: 1.0.0-beta.19-3)在src目录下提供了一个assets文件夹.您只需要添加图像标记的src属性,如下所示, <img src="./assets/logo.png">

注意:使用ng serve它构建项目时,会将assets文件dist夹复制到文件夹.