Comment charger une image (et d'autres actifs) dans Angular un projet?

Je suis assez nouveau dans Angular, donc je ne suis pas sûr de la meilleure pratique pour le faire.

J'ai utilisé angular-cli et ng new some-project pour générer une nouvelle application.

Il a créé un dossier "images" dans le dossier "actifs", donc maintenant mon dossier d'images est src/assets/images

Dans app.component.html(qui est la racine de mon application), je mets

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

Quand je fais ng serve pour afficher mon application Web, l'image ne s'affiche pas.

Quelle est la meilleure pratique pour charger des images dans une application angulaire?

EDIT: Voir la réponse ci-dessous. Mon nom d'image réel utilisait des espaces, ce qu'Angular n'aimait pas. Lorsque j'ai supprimé les espaces dans le nom du fichier, l'image s'affichait correctement.

Je l'ai corrigé. Mon nom de fichier image réel contenait des espaces, et pour une raison quelconque, Angular n'aimait pas ça. Lorsque j'ai supprimé les espaces de mon nom de fichier, cela a assets/images/myimage.pngfonctionné.

Dans mon projet, j'utilise la syntaxe suivante dans mon app.component.html:

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

ou

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

utilisez [src] comme expression de modèle lorsque vous liez une propriété à l'aide de l'interpolation:

<img [src]="imagePath" />

est le même que:

<img src={{imagePath}} />

Source: comment lier img src dans angular 2 dans ngFor?

Angular-cli inclut le dossier assets dans les options de construction par défaut. J'ai eu ce problème lorsque le nom de mes images avait des espaces ou des tirets. Par exemple :

• 'my-image-name.png' doit être 'myImageName.png'
• "mon nom d'image.png" doit être "monNomImage.png"

Si vous placez l'image dans le dossier assets / img, cette ligne de code devrait fonctionner dans vos modèles:

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

Si le problème persiste, vérifiez simplement si votre fichier de configuration Angular-cli et assurez-vous que votre dossier de ressources est ajouté dans les options de construction.

Étant spécifique à Angular2 à 5, nous pouvons lier le chemin de l'image en utilisant la liaison de propriété comme ci-dessous. Le chemin de l'image est entouré de guillemets simples.

Exemple d'exemple

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

Normalement, "app" est la racine de votre application - avez-vous essayé app/path/to/assets/img.png?

1 . Ajoutez cette ligne en haut dans le composant.

declare var require: any

2. ajoutez cette ligne dans votre classe de composants.

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

3. ajoutez ce 'imgname' dans la balise img src sur la page html.

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

pour moi "je" était capital dans "Images". ce qui n'aimait pas non plus angular-cli. il est donc également sensible à la casse.

Cela dépend toujours de l'emplacement de votre fichier html qui fait référence au chemin de la ressource statique (dans ce cas, l'image).

Exemple A:

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

Comme vous pouvez le voir, yourpage.html est à un dossier de la racine (dossier src), pour cette raison, il a besoin d'une quantité de ../ pour revenir à la racine, vous pouvez alors marcher jusqu'à l'image à partir de la racine:

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

Exemple B:

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

Ici, vous devez vous rendre dans l'arborescence par 2 dossiers:

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