Angulaire 4 Img src ne fonctionne pas

AngularJS

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

Angulaire

<img [src]="imagePath">

copiez vos images dans le dossier des actifs. Angular ne peut accéder qu'aux fichiers statiques comme les images et les fichiers de configuration du dossier assets.

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

Créer une image de dossier sous le dossier assets

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

dans votre component Assignez une variable comme,

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

utilisez ce netImage dans votre src pour obtenir 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>

Eh bien, le problème était que, d'une certaine manière, le chemin n'était pas reconnu lorsqu'il était 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!

@Annk vous pouvez faire une variable dans le __component.fichier ts

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

et à l'intérieur de l' __.composant.fichier html, 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>

<img src="images/no-record-found.png" width="50%" height="50%"/>

votre dossier images et votre index.html doit être dans le même répertoire(suivre la structure dir). il fonctionnera même après la construction!--3-->

Structure Du Répertoire

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

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

Le problème [src]="imagePath" ne fonctionne pas 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é aux composants this.imagePath ou si elle fait partie d'un ngFor boucle, puis *each.imagePath.

cependant, sur les deux autres options de travail, soit vous liez une chaîne de caractères sur HTML, soit vous autorisez HTML à lier à une variable qui n'est pas encore définie.

HTML ne jettera aucune erreur si vous liez <img src=garbage*Th_i$.ngs>, peu importe la volonté angulaire.

Ma recommandation est de utilisez un inline-si dans le cas où la variable pourrait ne pas être définie, comme <img [src]="!!imagePath ? imagePath : 'urlString'">, qui peut être bien comme node.src = imagePath ? imagePath : 'something'.

éviter de se lier à d'éventuelles variables manquantes ou faire bon usage de *ngIf dans cet élément.

vous devez mentionner la largeur de l'image par défaut

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

cela fonctionne pour moi basé sur tous les autres moyens alternatifs.

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

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

Vous devez utiliser ce code dans angulaire pour ajouter le chemin de l'image. si vos images sont dans le dossier assets, alors.

<img src="../assets/images/logo.png" id="banner-logo" alt="Landing Page"/>

si pas sous le dossier des actifs, alors vous pouvez utiliser ce code.

<img src="../images/logo.png" id="banner-logo" alt="Landing Page"/>

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

• " mon-image-name.png "devrait être" myImageName.png'
• ' mon nom d'image.png "devrait être" myImageName.png'

si vous mettez l'image dans le dossier assets/img, alors cette ligne de code devrait fonctionner dans vos templates:

<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.