Angular2で画像を提供する方法は？

Angular2アプリのimagesrcタグのassetsフォルダーにある画像の1つへの相対パスを配置しようとしています。コンポーネントの変数を「fullImagePath」に設定し、それをテンプレートで使用しました。私は多くの異なる可能なパスを試しましたが、私のイメージを上げることができないようです。Angular2には、Djangoのように常に静的フォルダーに相対的な特別なパスがありますか？

成分

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>

アプリツリー*スペースを節約するためにノードモジュールフォルダーを省略しました

├── 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はsrc/assetsフォルダーのみを指し、URLを介してアクセスできるように公開されているものは他にないため、フルパスを使用する必要があります

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

または

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

これは、ベースのhrefタグがで設定されている場合にのみ機能します /

にデータ用の他のフォルダを追加することもできますangular/cli。変更する必要があるのはangular-cli.json

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

編集時の注意：Distコマンドはアセットからすべての添付ファイルを検索しようとするため、画像と、URLを介してアクセスするファイル（モックjsonデータファイルなど）をアセット内に保持することも重要です。

アセットフォルダが気に入らない場合は、.angular-cli.json必要な他のフォルダを編集および追加できます。

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

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

Angular4フロントエンドとWebpackを備えたAsp.NetCore角度テンプレートプロジェクトを使用しています。画像名の前に「/ dist / assets / images /」を使用し、distディレクトリのassets / imagesディレクトリに画像を保存する必要がありました。例えば：

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

画像をアセットフォルダに置くだけで、そのリンクを使用してhtmlページまたはtsファイルで画像を参照できます。

角度では、サーバーから要求されるのは1ページ、つまりindex.htmlだけです。また、index.htmlとassetsフォルダーは同じディレクトリにあります。任意のコンポーネントに画像を配置するときに、のようなsrc値を指定しassets\image.pngます。ブラウザがその画像をサーバーに要求し、webpackがその画像を提供できるため、これは正常に機能します。