如何进入 public 目录

Question

我在我的项目中使用angular-cli，我想使用全局图像——我的网站标志图像。

据我所知，项目根目录下的 public 目录（angular-cli 创建）用于 public 资产 - 这似乎是放置我的图像的好地方（如果我错了请纠正我）。

但是，当我尝试在我的 <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

public 文件夹用于 public 资产，内容被复制到 /dist 文件夹。但是，当运行 ng build --prod 时，/public 文件夹中的 javascript 不会复制到 /dist.

Github 上有一个未解决的问题：Static JS assets not copying 放置在 public 文件夹中的图像应该可以从 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 文件夹。

Answer 3

我在 Angular 4 中解决了类似的问题（我在 public 文件夹中有一个 css 文件，我将其放在资产文件夹中）。答案是：

文件路径：./src/assets/book4u-logo.svg
<img src="./assets/book4u-logo.svg>

如何进入 public 目录

How to get to the public directory

angular

angular-cli