Come servire le immagini in Angular2?

Sto cercando di mettere il percorso relativo a una delle mie immagini nella mia cartella delle risorse in un tag immagine src nella mia app Angular2. Ho impostato una variabile nel mio componente su “fullImagePath” e l’ho usata nel mio modello. Ho provato molti diversi percorsi possibili, ma non riesco a far apparire la mia immagine. C’è qualche percorso speciale in Angular2 che è sempre relativo a una cartella statica come in Django?

Componente

• angular2 resolveAndCreate HTTP - missing HTTP_PROVIDERS in RC7
• Come si consumano i moduli npm da typescript?
• Angular2 - Carica dynamicmente il componente dal modulo
• TypeScript e inizializzatori di campo
• L'espressione ___ è cambiata dopo che è stata verificata

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() { } } 

Metto anche l’immagine nella stessa cartella di questo componente, quindi dal momento che il modello e il css nella stessa cartella funzionano, non sono sicuro del perché un simile percorso relativo all’immagine non funzioni. Questo è lo stesso componente con l’immagine nella stessa cartella.

 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

albero delle app * Ho omesso la cartella dei moduli del nodo per risparmiare spazio

• Oggetti TypeScript come tipi di dizionario come in C #
• ottenere e impostare in TypeScript
• Come funzionano le interfacce typescript con le firme dei costrutti?
• Il typescript angular 2 richiama la funzione javascript
• Nuova syntax es6 per l'importazione di moduli commonjs / amd, ad esempio `import foo = require ('foo')`

 ├── 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' 

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

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