Angular 4 img src n'est pas trouvé

Question

J'ai un problème avec le sourcing d'une image avec angular 4. Il continue à me dire que l'image n'est pas trouvée.

Structure du dossier :

app_folder/
app_component/
  - my_componenet
  - image_folder/
      - myimage

J'utilise l'image dans mycomponent . Si en mycomponent je l'insère directement avec :

<img src="img/myimage.png"

Cela fonctionne bien, mais j'ai vérifié le html et il crée un hash. Mais mes images doivent être ajoutées dynamiquement au html parce qu'elles font partie d'une liste. Donc, si j'utilise :

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

qui est en fait img/myimage.png ça ne marche pas. Si j'utilise :

<img [src]="imagePath">

Il est dit NOT FOUND (htttps://localhost/img/myimage.png) . Pouvez-vous m'aider ?

Answer 1

AngularJS

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

Angulaire

<img [src]="imagePath">

Answer 2

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

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

Answer 3

Créez un dossier d'images sous le dossier des actifs

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

Answer 4

Dans votre composant, 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>

Answer 5

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

myImage : chaîne de caractères = " http://example.com/path/image.png " ;

et dans le fichier __.component.html vous pouvez utiliser 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>