【发布时间】：2017-03-06 22:37:00
【问题描述】：
我正在尝试将我的一个图像的相对路径放在我的 Angular2 应用程序的图像 src 标记中的资产文件夹中。我在我的组件中将一个变量设置为“fullImagePath”并在我的模板中使用它。我尝试了许多不同的可能路径，但似乎无法提升我的形象。 Angular2 中是否有一些特殊路径总是相对于 Django 中的静态文件夹？
组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
fullImagePath: string;
constructor() {
this.fullImagePath = '../../assets/images/therealdealportfoliohero.jpg'
}
ngOnInit() {
}
}
我也把图片和这个组件放在同一个文件夹中，所以由于模板和 css 在同一个文件夹中工作，我不确定为什么与图像类似的相对路径不起作用。这是与图像在同一文件夹中的同一组件。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
fullImagePath: string;
constructor() {
this.fullImagePath = './therealdealportfoliohero.jpg'
}
ngOnInit() {
}
}
html
<div class="row">
<div class="col-xs-12">
<img [src]="fullImagePath">
</div>
</div>
应用树 * 我省略了节点模块文件夹以节省空间
├── README.md
├── angular-cli.json
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── hero
│ │ │ ├── hero.component.css
│ │ │ ├── hero.component.html
│ │ │ ├── hero.component.spec.ts
│ │ │ ├── hero.component.ts
│ │ │ └── portheropng.png
│ │ ├── index.ts
│ │ └── shared
│ │ └── index.ts
│ ├── assets
│ │ └── images
│ │ └── therealdealportfoliohero.jpg
│ ├── environments
│ │ ├── environment.dev.ts
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.json
│ └── typings.d.ts
└── tslint.json
【问题讨论】：
-
为什么要使用相对路径？我们不能将它设置为从根开始（即
this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg'） -
不幸的是，这不起作用。应用程序如何知道根在哪里？它是项目根目录，还是始终是 css、图像和 javascript 等静态文件的资产？
-
是的，但这确实取决于您的设置。对我来说，我将资产从代码部分中分离出来（通过为它们分配不同的 gulp 任务），这样我就可以确切地知道资产在哪里。
-
Phwew，终于让它工作了，Harry。您使用完整路径是对的。它不工作的原因是我过去在使用 Photoshop 时遇到的一个问题，并且没有正确地从那里导出图像。 Argghhh Photoshoppppp ！无论如何，谢谢哈利！
标签： html angular image typescript path