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

• Come utilizzare i percorsi in tsconfig.json
• Angular 4.3.3 HttpClient: come ottenere valore dall'intestazione di una risposta?
• Angolare 2 Utilizzare il componente da un altro modulo
• Esportazione typescript rispetto all'esportazione predefinita
• Come eseguire il debug di un'app angular utilizzando il pacchetto Web angular-cli?

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

• angular2 resolveAndCreate HTTP - missing HTTP_PROVIDERS in RC7
• angular 2 come restituire i dati da subscribe
• Come importare una libreria js senza file di definizione nel file typescript
• Trasforma il tipo di unione in tipo di intersezione
• C'è uno strumento per convertire i file JavaScript in TypeScript

 ├── 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" ]