Comment charger une image (et d'autres actifs) dans Angulaire 2 projet?

Je suis assez nouveau à Angulaires donc je ne suis pas certain de la meilleure pratique pour ce faire.

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

Dans il a créé un "images" dans le dossier "assets", dossier, alors maintenant, mon dossier d'images est src/assets/images

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

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

Quand je fais ng serve à la vue de mon application web, l'image ne s'affiche pas.

Quelle est la meilleure pratique pour charger des images dans Angulaire de l'application?

EDIT: Voir réponse ci-dessous. Mon vrai nom de l'image a été d'utiliser des espaces qui Angulaire n'aime pas. Quand j'ai enlevé les espaces dans le nom de fichier, l'image affichée correctement.

  • oui, vous avez raison , vous avez donné à corriger la syntaxe du chemin d'accès de l'actif fodler, peut-être un problème avec votre nom d'incompatibilité, de vérifier si l'image est présente ou pas
  • Certainement pas une non-concordance de nom, j'ai fini par créer un public dossier en dehors de src et l'affichage de l'image avec <img class="img-responsive" src="../../public/images/myimage.png">
  • Il fixe. Mon vrai nom de fichier d'image il y avait des espaces, et pour quelque raison que ce soit Angulaire n'est pas comme ça. Quand j'ai enlevé les espaces à partir de mon nom de fichier, assets/images/myimage.png travaillé.
  • bon 🙂 btw, pas besoin de créer d'autres dossiers publics dans la mise à Jour de la cli ils ont déjà même nommé actifs.
  • J'ai un problème similaire avec des fichiers avec d'autres extensions (p. ex. .sgf) je veux héberger ces fichiers et de les lier à eux à partir de l'application, mais apparemment simplement de les mettre dans le assets dossier n'est pas assez. Des idées ?
InformationsquelleAutor user3183717 | 2017-03-14
  1. 41

    Je l'ai corrigé. Mon vrai nom de fichier d'image il y avait des espaces, et pour quelque raison que ce soit Angulaire n'est pas comme ça. Quand j'ai enlevé les espaces à partir de mon nom de fichier, assets/images/myimage.png travaillé.

    InformationsquelleAutor user3183717
  2. 23

    Dans mon projet, je suis à l'aide de 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 l'expression d'un modèle lorsque vous liez une propriété à l'aide de l'interpolation:

    <img [src]="imagePath" />

    est la même chose que:

    <img src={{imagePath}} />

    Source: comment lier img src angulaire 2 dans ngFor?

    • est votre app.component.html et actifs dossier dans le même niveau?
    • Non, la structure de dossier est créé automatiquement, et vous devriez avoir les mêmes dossiers que moi: projet-dossier\src\actifs\ et project-folder\app\app.component.html si cela aide, veuillez upvote.
    • Grande réponse. Je vous remercie.
    InformationsquelleAutor mruanova
  3. 13

    Angulaires-cli comprend le dossier des actifs dans les options de compilation par défaut. J'ai eu ce problème lorsque le nom de mes images, il y avait des espaces ou des tirets.
    Par exemple :

    • 'mon-image-name.png' doit être 'myImageName.png'
    • "mon nom de l'image.png' doit être 'myImageName.png'

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

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

    Si le problème persiste il suffit de vérifier si votre Angulaires-cli fichier de configuration et assurez-vous que vos actifs dossier est ajouté dans les options de compilation.

    • [alt] n'est pas nécessaire pour les chaînes, [] est la liaison de données.
    • merci j'ai corrigé
    InformationsquelleAutor jmuhire
  4. 11

    Étant spécifiques à Angular2 à 5, nous pouvons lier le chemin de l'image à l'aide de la propriété de liaison comme ci-dessous. Le chemin de l'Image est délimitée par des guillemets simples.

    Exemple d'échantillon

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

    • quelle est la différence entre la src="assets/img/klogo.png" et [src]=" " assets/img/klogo.png'"?
    • voici la réponse de stackoverflow.com/questions/41426974/...
    • donc, fondamentalement, nous utilisons [src] pour lier le modèle, si nous voulons être en mesure de changer la src à l'aide de cette méthode.
    • Grâce mohit pour répondre au thread. @gdbj j'espère que vous avez eu votre confusions triés par maintenant.
    • Tiens seulement à souligner pour les futurs lecteurs de regarder à l'intérieur des guillemets simples dans le premier commentaire ici par gdbj. Ils sont plus difficiles à voir dans le commentaire de la police qu'ils sont dans la réponse ci-dessus, mais leur disparition pourrait entraîner une certaine confusion. (Dépend de votre navigateur, vous ne savez pas.)
    InformationsquelleAutor Bhuwan Maharjan
  5. 5

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

    • angulaires-cli mettre app et assets dossiers séparément en vertu de la src dossier. (désolé, je ne suis pas sûr de savoir comment je suis censé le format de structure de dossier et des noms)
    InformationsquelleAutor chrispy
  6. 2

    1 . Ajoutez cette ligne dans le composant.

    declare var require: any

    2 . ajoutez cette ligne dans votre classe de composant.

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

    1. ajouter ce "imgname' dans le tag img src sur la page html.

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

    • c'est mieux pour le fichier de la hiérarchie de l'arbre qui ne sont pas à plat.
    InformationsquelleAutor Bheem Singh