5

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

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

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

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

我的项目树（我删除了不必要的 suff）：

.
├── 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标签是 at并且/src/app/bfy.component.html图像本身是 at /public/book4u-logo.svg。

4

3 回答 3

7

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

于 2016-06-19T21:49:16.067 回答
5

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

注意：当您使用ng serve它构建项目时，会将您的文件夹复制assets到dist文件夹。

于 2016-11-15T09:16:38.180 回答
1

我在 Angular 4 中解决了一个类似的问题（我有一个位于公用文件夹中的 css 文件，我把它放在 assets 文件夹中）。答案是：

  • 文件路径：./src/assets/book4u-logo.svg
  • <img src="./assets/book4u-logo.svg>
于 2017-07-06T11:05:22.460 回答