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:
