Comment afficher des images dans Angular2 ?

Question

J'essaie de placer le chemin d'accès relatif à l'une de mes images dans mon dossier de ressources dans une balise image src de mon application Angular2. J'ai défini la variable "fullImagePath" dans mon composant et l'ai utilisée dans mon modèle. J'ai essayé de nombreux chemins différents, mais je ne parviens pas à afficher mon image. Existe-t-il un chemin spécial dans Angular2 qui est toujours relatif à un dossier statique comme dans Django ?

Composant

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = '../../assets/images/therealdealportfoliohero.jpg'
  }

  ngOnInit() {
  }

}

J'ai également placé l'image dans le même dossier que ce composant. Étant donné que le modèle et les css se trouvent dans le même dossier, je ne vois pas pourquoi un chemin relatif similaire vers l'image ne fonctionne pas. Voici le même composant avec l'image dans le même dossier.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = './therealdealportfoliohero.jpg'
  }

  ngOnInit() {
  }

}

html

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

arbre des applications * J'ai laissé de côté le dossier des modules de nœuds pour gagner de la place.

├── README.md
├── angular-cli.json
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── hero
│   │   │   ├── hero.component.css
│   │   │   ├── hero.component.html
│   │   │   ├── hero.component.spec.ts
│   │   │   ├── hero.component.ts
│   │   │   └── portheropng.png
│   │   ├── index.ts
│   │   └── shared
│   │       └── index.ts
│   ├── assets
│   │   └── images
│   │       └── therealdealportfoliohero.jpg
│   ├── environments
│   │   ├── environment.dev.ts
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.json
│   └── typings.d.ts
└── tslint.json

Answer 1

Angular ne fait que pointer vers src/assets rien d'autre n'est public pour accéder via url donc vous devez utiliser le chemin complet

 this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg'

Ou

 this.fullImagePath = 'assets/images/therealdealportfoliohero.jpg'

Cela ne fonctionnera que si la balise href de base est définie par l'option /

Note dans l'édition : La commande Dist essaiera de trouver toutes les pièces jointes à partir des actifs, il est donc également important de garder les images et tous les fichiers auxquels vous voulez accéder via url à l'intérieur des actifs, comme les fichiers de données mock json doivent également être dans les actifs.

Answer 2

Si vous n'aimez pas le dossier des actifs, vous pouvez modifier .angular-cli.json et ajoutez les autres dossiers dont vous avez besoin.

  "assets": [
    "assets",
    "img",
    "favicon.ico"
  ]

Answer 3

Ajoutez le chemin de votre image comme fullPathname='assets/images/therealdealportfoliohero.jpg' dans votre constructeur. Cela fonctionnera certainement.

Answer 4

J'utilise le projet de modèle angulaire Asp.Net Core avec un front-end Angular 4 et webpack. J'ai dû utiliser '/dist/assets/images/' devant le nom de l'image, et stocker l'image dans le répertoire assets/images du répertoire dist. eg :

 <img  class="img-responsive" src="/dist/assets/images/UnitBadge.jpg">

Answer 5

Il suffit de placer vos images dans le dossier assets et de les référencer dans votre html pages ou ts avec ce lien.