web-dev-qa-db-fra.com

Comment charger une image (et d'autres éléments) dans Angular un projet?

Je suis assez nouveau sur 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.

Dans cela créé un dossier "images" dans le dossier "assets", donc maintenant mon dossier 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">

Lorsque 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 Angular?

EDIT: Voir la réponse ci-dessous. Le nom de mon image actuelle utilisait des espaces, ce que Angular n'a pas aimé. Lorsque j'ai supprimé les espaces dans le nom du fichier, l'image s'affichait correctement.

htmlangularangular-cli
65
user3183717

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

46
user3183717

Dans mon projet, j'utilise la syntaxe suivante dans 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 d'une interpolation:

<img [src]="imagePath" />

est le même que:

<img src={{imagePath}} />

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

25
mruanova

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

  • 'my-image-name.png' devrait être 'myImageName.png'
  • 'mon image nom.png' devrait ê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 si votre fichier de configuration Angular-cli et assurez-vous que votre dossier d’actifs est ajouté aux options de construction.

13
jmuhire

Etant 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é par les guillemets simples.

exemple

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

12
Bhuwan Maharjan

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

6
chrispy

1 . Ajoutez cette ligne en haut du composant.

declare var require: any

2 ajoutez cette ligne dans votre classe de composant.

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

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

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

2
Bheem Singh