Jak wyświetlać obrazy w Angular2?

Question

Próbuję umieścić względną ścieżkę do jednego z moich obrazów w moim folderze zasobów w znaczniku 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ę uzyskać obrazu. Czy w Angular2 istnieje specjalna ścieżka, która zawsze jest względna w stosunku do statycznego folderu, takiego jak w Django?

Komponent

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ć również obraz w tym samym folderze co tego składnika, więc od szablonu i CSS w tym samym folderze, pracuje nie jestem pewien, dlaczego podobny względna ścieżka do obraz 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> 

aplikacja drzewo * Wyszedłem na zewnątrz folder modułów węzła, 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 

Answer 1

kątowe tylko punkty do src/assets folderu, nic innego nie jest publiczny dostęp za pośrednictwem adresu URL więc powinieneś użyć pełnej ścieżki

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

Albo

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

ta będzie działać tylko wtedy, gdy tag href baza jest ustawiona z /

Note EDIT: komenda Dist spróbuje znaleźć wszystkie załączniki z aktywów tak ważne jest również, aby utrzymać obrazy i wszystkie pliki, do których chcesz uzyskać dostęp za pomocą zasobów wewnętrznych Url, takich jak fałszywe pliki danych JSON, również powinny znajdować się w zasobach.

Answer 2

Dodaj ścieżkę do obrazu podobną do fullPathname='assets/images/therealdealportfoliohero.jpg' w swoim konstruktorze. To zadziała zdecydowanie.

Answer 3

Po prostu umieść swoje obrazy w folderze zasobów, odsyłaj je na swoje pliki html lub ts za pomocą tego linku.

Answer 4

Jeśli nie podoba Ci się folder aktywów, możesz edytować .angular-cli.json i dodawać inne potrzebne foldery.

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

Answer 5

Używam projektu szablonu kątowego Asp.Net Core z przednim końcem Angula 4 i plecakiem. Musiałem użyć "/ dist/assets/images /" przed nazwą obrazu i zapisać obraz w katalogu assets/images w katalogu dist. np .:

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