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

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

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

Angular punta solo alla cartella src/assets , nient’altro è pubblico per accedere tramite url, quindi è necessario utilizzare il percorso completo

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

O

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

Funzionerà solo se il tag href di base è impostato con /

Nota in modifica: il comando Dist cercherà di trovare tutti gli allegati dalle risorse, quindi è anche importante mantenere le immagini e tutti i file ai quali si desidera accedere tramite url all’interno delle risorse, come i file di dati di mock json dovrebbero anche essere nelle risorse.

Se non ti piace la cartella delle risorse puoi modificare .angular-cli.json e aggiungere altre cartelle di cui hai bisogno.

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

Aggiungi il tuo percorso dell’immagine come fullPathname='assets/images/therealdealportfoliohero.jpg' nel tuo costruttore. Funzionerà sicuramente.

Basta mettere le tue immagini nella cartella delle risorse facendole riferimento nelle tue pagine html o nei file ts con quel link.

Sto utilizzando il progetto di modello angular di Asp.Net Core con un front-end angular 4 e un pacchetto web. Ho dovuto usare ‘/ dist / assets / images /’ davanti al nome dell’immagine, e memorizzare l’immagine nella directory assets / images nella directory dist. per esempio: