web-dev-qa-db-ja.com

Angular 2で画像を提供する方法

Angular 2アプリケーションのimage srcタグに、assetsフォルダ内の自分の画像の1つへの相対パスを入れようとしています。コンポーネントの変数を「fullImagePath」に設定し、それをテンプレートで使用しました。私はさまざまな方法を試してみましたが、私のイメージを引き出すことはできません。 Angular 2には、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
html5angularimagetypescriptpath
71
JBT

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コマンドはアセットからすべての添付ファイルを検索しようとするので、モックjsonデータファイルもアセット内にあるように、アセット内のURLを介してアクセスしたいイメージおよびファイルを保持することも重要です。

90
Babar Bilal

資産フォルダが気に入らない場合は、.angular-cli.jsonを編集して必要な他のフォルダを追加できます。

  "assets": [
    "assets",
    "img",
    "favicon.ico"
  ]
11
Michal Ambrož

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

4
Gajanan Kulkarni

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

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

アセットフォルダーにあなたのイメージを入れるだけで、そのリンクを使ってあなたのhtmlページまたはtsファイルでそれらを参照できます。

1
Abhishek G