Come caricare un'immagine (e altre risorse) in Angular un progetto?

Sono abbastanza nuovo su Angular, quindi non sono sicuro che sia la migliore pratica per farlo.

Ho usato angular-cli e ng new some-projectper generare una nuova app.

In esso è stata creata una cartella "immagini" nella cartella "risorse", quindi ora la cartella delle immagini è src/assets/images

In app.component.html(che è la radice della mia applicazione), metto

<img class="img-responsive" src="assets/images/myimage.png">

Quando faccio ng serveper visualizzare la mia applicazione web, l'immagine non viene visualizzata.

Qual è la migliore pratica per caricare le immagini in un'applicazione Angular?

EDIT: vedi la risposta sotto. Il nome della mia immagine reale utilizzava spazi, cosa che ad Angular non piaceva. Quando ho rimosso gli spazi nel nome del file, l'immagine veniva visualizzata correttamente.

L'ho riparato. Il nome del mio file immagine effettivo aveva degli spazi al suo interno e per qualsiasi motivo ad Angular non piaceva. Quando ho rimosso gli spazi dal mio nome file, ha assets/images/myimage.pngfunzionato.

Nel mio progetto sto usando la seguente sintassi nel mio app.component.html:

<img src="/assets/img/1.jpg" alt="image">

o

<img src='http://mruanova.com/img/1.jpg' alt='image'>

usa [src] come espressione modello quando leghi una proprietà usando l'interpolazione:

<img [src]="imagePath" />

equivale a:

<img src={{imagePath}} />

Fonte: come legare img src in angular 2 in ngFor?

Angular-cli include la cartella degli asset nelle opzioni di compilazione per impostazione predefinita. Ho riscontrato questo problema quando il nome delle mie immagini aveva spazi o trattini. Per esempio :

• "my-image-name.png" dovrebbe essere "my-imageName.png"
• "my image name.png" dovrebbe essere "myImageName.png"

Se metti l'immagine nella cartella assets / img, questa riga di codice dovrebbe funzionare nei tuoi modelli:

<img alt="My image name" src="./assets/img/myImageName.png">

Se il problema persiste, controlla se il tuo file di configurazione Angular-cli e assicurati che la cartella degli asset sia stata aggiunta nelle opzioni di compilazione.

Essendo specifico per Angular2 a 5, possiamo legare il percorso dell'immagine usando l'associazione delle proprietà come di seguito. Il percorso dell'immagine è racchiuso tra virgolette singole.

Esempio di esempio

<img [src]="'assets/img/klogo.png'" alt="image">

Normalmente "app" è la radice della tua applicazione - hai provato app/path/to/assets/img.png?

1. Aggiungi questa riga in alto nel componente.

declare var require: any

2. aggiungi questa riga nella tua classe di componenti.

imgname= require("../images/imgname.png");

3. aggiungi questo 'imgname' nel tag img src sulla pagina html.

   <img src={{imgname}} alt="">

per me "io" era capitale in "Immagini". che anche angular-cli non piaceva. quindi è anche case sensitive.

Dipende sempre da dove si trova il file html che fa riferimento al percorso della risorsa statica (in questo caso l'immagine).

Esempio A:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

Come puoi vedere, yourpage.html è a una cartella di distanza dalla root (cartella src), per questo motivo è necessaria una quantità di ../ per tornare alla root, quindi puoi camminare all'immagine da root:

<img class="img-responsive" src="../assests/images/myimage.png">

Esempio B:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

Qui devi andare nell'albero per 2 cartelle:

<img class="img-responsive" src="../../assests/images/myimage.png">