Angular2で画像を配信するにはどうすればよいですか？

Question

Angular2アプリの画像srcタグのassetsフォルダに画像の相対パスを入れようとしています。私は、コンポーネント内の変数を 'fullImagePath'に設定し、それをテンプレートで使用しました。私は多くの異なる可能な道を試みましたが、私のイメージを上げるように見えません。 Angular2にDj​​angoのような静的フォルダとの相対的な相対パスがある特別なパスがありますか？

コンポーネント

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

} 

私も、このコンポーネントと同じフォルダに画像を入れ、同じフォルダ内のテンプレート、およびCSS以来働いているので、私はよく分からない理由と同様の相対パスイメージは機能していません。これは、同じフォルダ内の画像と同じコンポーネントです。

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> 

アプリツリーは*私は宇宙にsrc/assetsフォルダへ

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

角点のみを保存するためにノードモジュールフォルダを残し、他には何もURLを介してアクセスするパブリックではありません完全なパスを使用する必要があります。

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

それとも

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

ベースHREFタグを編集中/

注意して設定されている場合にのみ動作します： ディストコマンド、維持することも重要であるように、資産からのすべての添付ファイルを見つけようとします画像や、あなたが資産の中のurlを介してアクセスしたいファイルは、mock jsonデータファイルもアセットの中になければなりません。

Answer 2

fullPathname='assets/images/therealdealportfoliohero.jpg'のような画像パスをコンストラクタに追加します。それは間違いなく働くでしょう。

Answer 3

アセットフォルダに画像を置くだけで、htmlページまたはtsのファイルを参照してください。

Answer 4

アセットフォルダが嫌いなら、.angular-cli.jsonを編集して、必要な他のフォルダを追加することができます。

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

Answer 5

私は、角度4のフロントエンドとウェブパックを持つAsp.Net Core角型テンプレートプロジェクトを使用しています。イメージ名の前に '/ dist/assets/images /'を使用し、distディレクトリのassets/imagesディレクトリにイメージを格納する必要がありました。 例：

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