196 votes

user3183717 avatar

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

Demandé el 14 de Mars, 2017
Quand la question a-t-elle été
137627 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je suis assez nouveau en Angular donc je ne suis pas sûr de la meilleure pratique pour faire cela.

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 "assets", donc maintenant mon dossier d'images est src/assets/images

Dans app.component.html (qui est la racine de mon application), j'ai mis

Lorsque je fais ng serve pour visualiser mon application web, l'image ne s'affiche pas.

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

MODIFIER: Voir la réponse ci-dessous. Le nom de mon image réel contenait des espaces, ce qu'Angular n'aimait pas. Lorsque j'ai supprimé les espaces dans le nom du fichier, l'image s'est affichée correctement.

Demandé el 14 de Mars, 2017 par user3183717

2 votes

Avatar de Pardeep Jain

Oui vous avez raison, vous avez donné la syntaxe de chemin correcte à partir du dossier des ressources, il pourrait y avoir un problème avec le nom qui ne correspond pas, vérifiez si l'image est présente ou non

Commenté el 14 de Mars, 2017 par Pardeep Jain

1 votes

Avatar de user3183717

Certainement pas un nom incohérent, j'ai fini par créer un dossier public en dehors de src et afficher l'image avec ![](../../public/images/myimage.png)

Commenté el 14 de Mars, 2017 par user3183717

0 votes

Avatar de user3183717

Réparé. 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, assets/images/myimage.png a fonctionné.

Commenté el 14 de Mars, 2017 par user3183717
Afficher 2 autres commentaires

Réponses

Trop de publicités?

149voto

mruanova avatar
mruanova Points 1377

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

ou

utilisez [src] en tant qu'expression de modèle lorsque vous liez une propriété en utilisant l'interpolation :

est identique à :

Source : how to bind img src in angular 2 in ngFor?

Répondu el 26 de Août, 2017 par mruanova (1377 Points )

1 votes

Avatar de Halil

Est-ce que votre fichier app.component.html et le dossier assets sont au même niveau?

Commenté el 28 de Août, 2017 par Halil

0 votes

Avatar de mruanova

Non, la structure des dossiers est créée automatiquement et vous devez avoir les mêmes dossiers que moi : project-folder\src\assests\ et project-folder\app\app.component.html si cela vous aide, veuillez voter.

Commenté el 28 de Août, 2017 par mruanova

105voto

user3183717 avatar
user3183717 Points 1027

J'ai corrigé cela. Le nom de mon fichier image actuel contenait des espaces, et pour une raison quelconque Angular n'aimait pas ça. Lorsque j'ai supprimé les espaces de mon nom de fichier, assets/images/myimage.png a fonctionné.

Répondu el 14 de Mars, 2017 par user3183717 (1027 Points )

0 votes

Avatar de pandy giankoulidis

J'avais un caractère spécial '^' dans le nom de fichier et j'avais le même problème, après l'avoir renomé, cela a fonctionné, donc je crois que Angular n'aime pas les caractères spéciaux et les espaces dans les noms de fichier

Commenté el 16 de Juillet, 2022 par pandy giankoulidis

39voto

jmuhire avatar
jmuhire Points 379

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

  • 'mon-nom-image.png' devrait être 'monNomImage.png'
  • 'mon nom image.png' devrait être 'monNomImage.png'

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

Si le problème persiste, vérifiez simplement si votre fichier de configuration Angular-cli contient bien votre dossier assets dans les options de construction.

Répondu el 13 de Août, 2018 par jmuhire (379 Points )

1 votes

Avatar de wordpress_designer

[alt] n'est pas nécessaire pour les chaînes de caractères, [] est utilisé pour la liaison de données.

Commenté el 10 de Mai, 2019 par wordpress_designer

21voto

Bhuwan Maharjan avatar
Bhuwan Maharjan Points 146

É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 encadré par des guillemets simples.

Exemple d'échantillon

Répondu el 12 de Novembre, 2017 par Bhuwan Maharjan (146 Points )

1 votes

Avatar de gdbj

Quelle est la différence entre src="assets/img/klogo.png" et [src]="'assets/img/klogo.png'" ?

Commenté el 28 de Décembre, 2017 par gdbj

1 votes

Avatar de mohit uprim

@gdbj voici la réponse stackoverflow.com/questions/41426974/…

Commenté el 20 de Janvier, 2018 par mohit uprim

1 votes

Avatar de gdbj

Donc en gros, nous utilisons [src] pour lier au modèle si nous voulons pouvoir changer la src en utilisant cette méthode.

Commenté el 21 de Janvier, 2018 par gdbj
Afficher 3 autres commentaires

10voto

chrispy avatar
chrispy Points 2550

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

Répondu el 14 de Mars, 2017 par chrispy (2550 Points )

0 votes

Avatar de user3183717

Angular-cli place les dossiers app et assets séparément sous le dossier src. (désolé je ne suis pas sûr de la façon dont je suis censé formater la structure et les noms de dossiers)

Commenté el 14 de Mars, 2017 par user3183717

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X