Angular2'de görüntüler nasıl sunulur?

Question

Angular2 uygulamasındaki bir resim src etiketindeki öğelerimden birine göreli yolunu öğelerimdeki bir klasöre koymaya çalışıyorum. Bileşenimde "fullImagePath" olarak bir değişken ayarladı ve bunu şablonumda kullandım. Birçok farklı olası yolu denedim, ancak sadece resmimi çekemiyorum. Angular2'de Django'daki gibi bir statik klasöre göre her zaman özel bir yol var mı?

Bileşen

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

} 

Ben de bu bileşeni olarak aynı klasöre resim koymak aynı klasörde şablona ve css beri çalışıyor yüzden emin değilim neden benzer bir göreli yol görüntü çalışmıyor. Bu, aynı klasördeki görüntü ile aynı bileşendir.

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> 

uygulama ağacı * Ben boşluğunu src/assets klasörüne

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

Eğik sadece noktalarını kaydetmek için düğüm modülleri klasörü dışında kalan, başka bir şey url üzerinden erişmek için herkese açıktır Bu nedenle,

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

tam yolunu kullanmalısınız temel href etiket düzenlemede /

Not ile ayarlanırsa

Ya

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

Bu

yalnızca çalışır: o tutmak da önemlidir bu yüzden Dist komut varlıklarından tüm ekleri bulmaya çalışacağız Mock json veri dosyaları gibi, öğeler içerisindeki URL'ler aracılığıyla erişmek istediğiniz görüntüler ve dosyalar da varlıklarda olmalıdır.

Answer 2

Yapıcınıza fullPathname='assets/images/therealdealportfoliohero.jpg' gibi yolunuzu ekleyin. Kesinlikle işe yarayacak.

Answer 3

Sadece resimlerinizi varlık klasörüne koyun, bu bağlantıya sahip olduğunuz html sayfalarına veya ts dosyalarına bakın.

Answer 4

Öğeler klasörünü beğenmediyseniz, .angular-cli.json düzenleyebilir ve ihtiyacınız olan diğer klasörleri ekleyebilirsiniz.

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

Answer 5

Bir Eğik 4 ön uç ve WebPack ile Asp.Net Çekirdek açısal şablon proje kullanıyorum. Resim adının önünde '/ dist/assets/images /' kullanmak zorunda kaldım ve görüntüyü dist dizinindeki varlıklar/resimler dizininde sakladım. örn .:

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