web-dev-qa-db-fra.com

Comment diffuser des images dans Angular2?

J'essaie de définir le chemin d'accès relatif à l'une de mes images dans mon dossier d'actifs, dans une balise src d'image dans mon application Angular2. J'ai défini une variable dans mon composant sur 'fullImagePath' et je l'ai utilisée dans mon modèle. J'ai essayé beaucoup de chemins différents, mais je n'arrive pas à obtenir mon image. Existe-t-il un chemin spécial dans Angular2 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. Par conséquent, étant donné que le modèle et les fichiers css du même dossier fonctionnent, je ne sais pas pourquoi un chemin d'accès relatif similaire à l'image ne fonctionne pas. C'est 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>

app tree * J'ai oublié le dossier des modules de nœuds pour économiser de l'espace

├── 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
html5angularimagetypescriptpath
75
JBT

Angular pointe uniquement vers le dossier src/assets, aucun autre accès public n’est accessible via l’URL. Vous devez donc 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 avec /

Vous pouvez également ajouter d'autres dossiers pour les données dans angular/cli. Tout ce que vous avez besoin de modifier est angular-cli.json

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

Note in edit: La commande Dist va essayer de trouver toutes les pièces jointes à partir des ressources. Il est donc important de conserver les images et tous les fichiers auxquels vous souhaitez accéder via les URL à l'intérieur des ressources.

95
Babar Bilal

Si vous n'aimez pas le dossier des actifs, vous pouvez éditer .angular-cli.json et ajouter d'autres dossiers dont vous avez besoin.

  "assets": [
    "assets",
    "img",
    "favicon.ico"
  ]
11
Michal Ambrož

Ajoutez votre chemin d’image comme fullPathname='assets/images/therealdealportfoliohero.jpg' dans votre constructeur. Cela fonctionnera définitivement.

4
Gajanan Kulkarni

J'utilise le projet de modèle Asp.Net Core angular avec un frontal Angular 4 et un pack Web. Je devais utiliser '/ dist/assets/images /' devant le nom de l'image et stocker l'image dans le répertoire assets/images du répertoire dist. par exemple:

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

Il suffit de placer vos images dans le dossier des ressources et de les référencer dans vos fichiers html ou ts avec ce lien.

1
Abhishek G