Jak wyświetlać obrazy w Angular2?

Próbuję umieścić względną ścieżkę do jednego z moich obrazów w folderze zasobów w tagu src obrazu w mojej aplikacji Angular2. Ustawiłem zmienną w moim komponencie na „fullImagePath” i użyłem tego w moim szablonie. Próbowałem wielu różnych możliwych ścieżek, ale po prostu nie mogę poprawić swojego wizerunku. Czy w Angular2 jest jakaś specjalna ścieżka, która jest zawsze względna do folderu statycznego, takiego jak w Django?

Składnik

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

}

Umieściłem również obraz w tym samym folderze co ten komponent, więc ponieważ szablon i css w tym samym folderze działają, nie jestem pewien, dlaczego podobna ścieżka względna do obrazu nie działa. To jest ten sam komponent z obrazem w tym samym folderze.

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>

drzewo aplikacji * Pominąłem folder modułów węzłów, aby zaoszczędzić miejsce

├── 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 wskazuje tylko na src/assetsfolder, nic innego nie jest dostępne publicznie za pośrednictwem adresu URL, więc powinieneś użyć pełnej ścieżki

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

Lub

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

Działa to tylko wtedy, gdy znacznik base href jest ustawiony na /

Możesz także dodać inne foldery na dane w angular/cli. Wszystko, co musisz zmodyfikować, toangular-cli.json

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

Uwaga przy edycji: polecenie Dist spróbuje znaleźć wszystkie załączniki z zasobów, więc ważne jest również, aby zachować obrazy i wszelkie pliki, do których chcesz uzyskać dostęp za pośrednictwem adresu URL, w zasobach, takie jak pozorowane pliki danych json również powinny znajdować się w zasobach.

Jeśli nie lubisz folderu zasobów, możesz edytować .angular-cli.jsoni dodawać inne potrzebne foldery.

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

Dodaj ścieżkę obrazu, jak fullPathname='assets/images/therealdealportfoliohero.jpg'w konstruktorze. Na pewno zadziała.

Używam projektu szablonu kątowego Asp.Net Core z interfejsem i pakietem internetowym Angular 4. Musiałem użyć „/ dist / asset / images /” przed nazwą obrazu i zapisać obraz w katalogu asset / images w katalogu dist. na przykład:

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

Po prostu umieść swoje obrazy w folderze zasobów i skieruj je na swoje htmlstrony lub tspliki z tym linkiem.

W angular tylko jedna strona jest żądana z serwera, to jest index.html. Indeks.html i folder zasobów znajdują się w tym samym katalogu. umieszczając obraz w dowolnym komponencie, podaj wartość src, taką jak assets\image.png. To zadziała dobrze, ponieważ przeglądarka wyśle ​​żądanie do serwera dla tego obrazu, a pakiet sieciowy będzie mógł go obsłużyć.