Wie kann ich Bilder in Angular2 bereitstellen?

Ich versuche, den relativen Pfad zu einem meiner Bilder in meinem Assets-Ordner in einem Bild-src-Tag in meiner Angular2-App zu platzieren. Ich habe eine Variable in meiner Komponente auf 'fullImagePath' gesetzt und diese in meiner Vorlage verwendet. Ich habe viele verschiedene mögliche Wege ausprobiert, kann aber mein Image nicht verbessern. Gibt es in Angular2 einen speziellen Pfad, der immer relativ zu einem statischen Ordner wie in Django ist?

Komponente

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() {
  }

}

Ich habe das Bild auch in denselben Ordner wie diese Komponente gelegt. Da die Vorlage und das CSS im selben Ordner funktionieren, bin ich mir nicht sicher, warum ein ähnlicher relativer Pfad zum Bild nicht funktioniert. Dies ist dieselbe Komponente mit dem Bild im selben Ordner.

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-Baum * Ich habe den Ordner mit den Knotenmodulen aus Platzgründen weggelassen

├── 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

Angular zeigt nur auf den src/assetsOrdner, nichts anderes ist öffentlich, um über die URL darauf zuzugreifen. Sie sollten also den vollständigen Pfad verwenden

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

Oder

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

Dies funktioniert nur, wenn das Basis-href-Tag mit festgelegt ist /

Sie können auch andere Ordner für Daten hinzufügen angular/cli. Sie müssen lediglich Änderungen vornehmenangular-cli.json

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

Hinweis beim Bearbeiten: Der Befehl Dist versucht, alle Anhänge von Assets zu finden. Daher ist es auch wichtig, die Bilder und alle Dateien, auf die Sie über die URL zugreifen möchten, in Assets zu behalten, z. B. sollten sich Schein-JSON-Datendateien auch in Assets befinden sollten.

Wenn Sie den Assets-Ordner nicht mögen, können .angular-cli.jsonSie andere benötigte Ordner bearbeiten und hinzufügen.

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

Fügen Sie Ihren Bildpfad wie fullPathname='assets/images/therealdealportfoliohero.jpg'in Ihrem Konstruktor hinzu. Es wird definitiv funktionieren.

Ich verwende das Winkelvorlagenprojekt Asp.Net Core mit einem Angular 4-Frontend und einem Webpack. Ich musste '/ dist / Assets / Images /' vor dem Bildnamen verwenden und das Bild im Verzeichnis Assets / Images im Verzeichnis dist speichern. z.B:

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

Legen Sie Ihre Bilder einfach in den Assets-Ordner und verweisen Sie sie auf Ihre htmlSeiten oder tsDateien mit diesem Link.

Im Winkel wird nur eine Seite vom Server angefordert, nämlich index.html. Index.html und Assets-Ordner befinden sich im selben Verzeichnis. Geben Sie beim Einfügen eines Bilds in eine beliebige Komponente einen src-Wert wie an assets\image.png. Dies funktioniert einwandfrei, da der Browser eine Anfrage an den Server für dieses Bild stellt und das Webpack dieses Bild bereitstellen kann.