如何在Angular2中提供图像？

Question

我试图将我的一个图像的相对路径放在我的Angular2应用程序中的图像src标记的assets文件夹中.我在我的组件中将变量设置为'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

Answer 1

Angular只指向src/assets文件夹,没有其他内容可以通过url访问,因此您应该使用完整路径

 this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg'

要么

 this.fullImagePath = 'assets/images/therealdealportfoliohero.jpg'

这仅在设置了基本href标记时才有效 /

您还可以为其中的数据添加其他文件夹angular/cli.所有你需要修改angular-cli.json

"assets": [
 "assets",
 "img",
 "favicon.ico",
 ".htaccess"
]

编辑时注意:Dist命令将尝试查找资产中的所有附件,因此保持图像以及要通过资源内部URL访问的任何文件也很重要,例如模拟json数据文件也应该在资产中.

Answer 2

如果您不喜欢assets文件夹,则可以编辑.angular-cli.json并添加所需的其他文件夹.

  "assets": [
    "assets",
    "img",
    "favicon.ico"
  ]