Website-Suche

html - Wie serviert man Bilder in Angular2?

Ich versuche, den relativen Pfad zu einem meiner Bilder in meinem Assets-Ordner in einem Image-Tag (src) in meiner Angular2-App einzufügen. Ich habe in meiner Komponente eine Variable auf 'fullImagePath' gesetzt und diese in meiner Vorlage verwendet. Ich habe viele verschiedene mögliche Pfade ausprobiert, aber ich bekomme mein Bild einfach nicht angezeigt. Gibt es in Angular2 einen speziellen Pfad, der immer relativ zu einem statischen Ordner ist, wie in Django?

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, also 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 'node_modules' weggelassen, um Platz zu sparen

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

Antwort #1

Angular zeigt nur auf den src/assets-Ordner, nichts anderes ist öffentlich über die URL zugänglich, daher sollten Sie den vollständigen Pfad verwenden

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

Oder

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

Dies funktioniert nur, wenn das Base-Href-Tag mit / gesetzt ist

Sie können auch andere Ordner für Daten in angular/cli hinzufügen. Alles, was Sie ändern müssen, ist angular-cli.json.

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

Hinweis beim Bearbeiten: Der Dist-Befehl wird versuchen, alle Anhänge aus 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, ebenso sollten beispielsweise Beispieldaten im JSON-Format ebenfalls in Assets sein.

Antwort #2

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

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

Verwandte Artikel