web-dev-qa-db-fra.com

Angular 4 Img src ne fonctionne pas

j'ai un problème avec l'image src en angular 4. Cela n'arrête pas de me dire que l'image n'est pas trouvée.

structure des dossiers: Ici

J'utilise l'image dans mon composant. Si dans mon composant j'insère directement 

<img src="img/myimage.png"

Cela fonctionne bien, mais j'ai vérifié le code HTML et cela crée un hachage. Mais mes images doivent être automatiquement ajoutées au code HTML, car elles font partie d’une liste. Donc, si j'utilise:

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

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

<img [src]="imagePath">

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

htmlimageangularsrc
37
Annk

AngularJS

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

Angulaire 

<img [src]="imagePath">
48
Yoav Schniederman

Copiez vos images dans le dossier des ressources. Angular ne peut accéder qu'aux fichiers statiques tels que les images et les fichiers de configuration à partir du dossier assets.

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

37
CharanRoot

Créer un dossier d'image sous le dossier des actifs

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

dans votre composant attribuer une variable comme,

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

utilisez cette 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>
6
Deepak Jha

@Annk vous pouvez créer une variable dans le fichier __component.ts

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

et dans le fichier __.composant.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>
3
Fakh Ri
<img src="images/no-record-found.png" width="50%" height="50%"/>

Votre dossier images et votre index.html doivent être dans le même répertoire (suivez la structure de répertoires suivante) ..__

Structure du répertoire

-src
    |-images
    |-index.html
    |-app
2
Kapil Thakkar

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. Je devais créer une variable comme celle-ci:

path: any = require ("../../ img/myImage.png");

et puis je peux l'utiliser dans src. Merci tout le monde!

2
Annk

Une observation importante sur le fonctionnement des liaisons d’attributs angulaires 2, 2+.

Le problème avec [src]="imagePath" ne fonctionne pas alors que les suivantes:

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

Si votre déclaration de liaison est due, [src]="imagePath" est directement lié au this.imagePath du composant ou, s'il fait partie d'une boucle ngFor, alors *each.imagePath.

Cependant, pour les deux autres options de travail, vous liez une chaîne au format HTML ou vous permettez à HTML d’être lié à une variable qui n’a pas encore été définie.

HTML ne générera pas d'erreur si vous liez <img src=garbage*Th_i$.ngs>, mais Angular le fera.

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

Évitez de vous lier à d'éventuelles variables manquantes ou faites un bon usage de *ngIf dans cet élément.

1
Gabriel Balsa Cantú

Angular ne peut accéder qu'aux fichiers statiques tels que les images et les fichiers de configuration à partir du dossier assets. Belle façon de télécharger le chemin de chaîne de l’image stockée distante et de le charger dans le modèle.

  public concateInnerHTML(path: string): string {
     if(path){
        let front = "<img class='d-block' src='";
        let back = "' alt='slide'>";
        let result = front + path + back;
        return result;
     }
     return null;
  }

Dans un composant imlement, l'interface DoCheck et sa formule précédente sont utilisées pour la base de données. Requête de base de données est seulement un échantillon.

ngDoCheck(): void {
   this.concatedPathName = this.concateInnerHTML(database.query('src'));
}

Et en HTML tamplate <div [innerHtml]="concatedPathName"></div>

1
Mises

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

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

sinon dans le dossier assets, vous pouvez utiliser ce code.

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

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.

0
ionMobDev

Ajouter dans angular.json 

  "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Et puis utilisez-le comme ceci: <img src={{imgPath}} alt="img"></div>

Et dans ts: storyPath = 'assets/images/myImg.png';

0
Dragomir Vasile Georgiana Lari

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.

0
jmuhire

Vérifiez votre.angular-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 , peut aider.

0
chassis