Angular 4 Img src ne fonctionne pas

je vais avoir un problème avec l'image src angulaire 4. Il continue à me dire que l'image n'est pas trouvée.

structure de dossier:
Ici

Je suis en utilisant l'image de moncomposant. Si dans mon composant, j'insérer directement

<img src="img/myimage.png"

Il fonctionne très bien, mais j'ai vérifié le code html et elle crée un hash. Mais mes images doivent être dinamically ajouté le html parce qu'ils font partie d'une liste. Donc, si j'utilise:

<img src="{{imagePath}}">

qui, fondamentalement, est "img/myimage.png" ça ne fonctionne pas. Si j'utilise

<img [src]="imagePath">

Il ne dit PAS TROUVÉ (htttps://localhost/img/myimage.png). Pouvez-vous m'aider?

source d'informationauteur Annk

  1. 25

    AngularJS

    <img ng-src="{{imagePath}}">

    Angulaire 

    <img [src]="imagePath">
  2. 22

    Copier vos images dans le dossier assets. Angulaire peut seulement accéder à des fichiers statiques comme des images et des fichiers de configuration à partir du dossier des actifs.

    Essayer comme ceci: <img src="assets/img/myimage.png">

  3. 4

    Créer une image de dossier sous le dossier assets

    <img src="assets/images/logo_poster.png">
  4. 2

    Bien, le problème est que, en quelque sorte, le chemin n'a pas été reconnu lors de l'été inséré dans src par une variable. J'ai dû créer une variable comme ceci:

    chemin d'accès:tout = require("../../img/myImage.png");

    et puis je peux l'utiliser dans src. Merci à tous!

  5. 2

    dans votre composant affecter une variable comme,

    export class AppComponent {
  netImage:any = "../assets/network.jpg";
  title = 'app';
}

    utiliser cette netImage dans votre répertoire src de l'image, comme indiqué ci-dessous,

    <figure class="figure">
  <img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
  6. 1

    @Annk, vous pouvez créer une variable dans l' __composant.fichier ts

    myImage : string = "http://example.com/path/image.png";

    et à l'intérieur de l' __.component.html fichier, vous pouvez utiliser l'une de ces 3 méthodes :

    1 .

    <div> <img src="{{myImage}}"> </div>

    2 . 

    <div> <img [src]="myImage"/> </div>

    3 . 

    <div> <img bind-src="myImage"/> </div>
  7. 1
    <img src="images/no-record-found.png" width="50%" height="50%"/>

    Votre dossier d'images et votre index.html doit être dans le même répertoire(suivre les dir de la structure).
    il va même jusqu'à travailler après la construction

    Structure De Répertoire

    -src
    |-images
    |-index.html
    |-app
  8. 1

    Une observation importante sur la façon Angulaire 2, 2+ attribut liaisons travail.

    Le problème avec [src]="imagePath" pas de travail alors que le do suivant:

    • <img src="img/myimage.png">
    • <img src={{imagePath}}>

    Est en raison de votre déclaration contraignante, [src]="imagePath" est directement lié à la Composante this.imagePath ou si elle fait partie d'un ngFor boucle, puis *each.imagePath.

    Cependant, sur les deux autres options, soit vous êtes de la liaison d'une chaîne sur le code HTML ou HTML permettant d'être affectée à une variable qui n'est pas encore défini.

    HTML ne jeter aucune erreur si vous liez <img src=garbage*Th_i$.ngs>cependant Angulaire de la volonté.

    Ma recommandation est de utiliser une ligne-si dans le cas où la variable peut ne pas être définiecomme <img [src]="!!imagePath ? imagePath : 'urlString'">ce qui peut être bien comme node.src = imagePath ? imagePath : 'something'.

    Éviter de liaison possible de variables manquantes ou de faire bon usage de *ngIf dans cet élément.

  9. 0

    Vous devez préciser la largeur de l'image en tant que par défaut 

     <img width="300" src="assets/company_logo.png">

    son travail pour moi sur la base de toutes les autres de façon alternative.

  10. 0

    Vérifier dans votre.angulaire de la cli.json dans le dossier app -> actifs:[] si vous avez inclus les actifs dossier.

    Ou peut-être quelque chose ici: https://github.com/angular/angular-cli/issues/2231peut vous aider.