Question

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

据我所知，项目根目录的public目录（angular-cli创建的）是公共资产 - 这似乎是放置我的形象的好地方（请纠正我，如果我＆＃ 39;我错了。）

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

/dist将所有文件放在<img src="book4u-logo.svg" />目录中。

要在index.html中显示图像： /src

如果您想在应用中使用您的图片，您应该使用src/shared/assets/img/book4u-logo.svg目录中的文件夹，例如/dist

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

Github上有一个未解决的问题：Static JS assets not copying 可以从{{1}}文件夹中访问放置在公用文件夹中的图像。

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中解决了类似的问题（我有一个公共文件夹中的css文件，我把它放在assets文件夹中）。答案是：

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

如何到达公共目录

3 个答案: