Angular2에서 이미지를 제공하는 방법은 무엇입니까?

Angular2에서 이미지를 제공하는 방법은 무엇입니까?

Angular2 앱의 이미지 src 태그에 자산 폴더에 있는 이미지 중 하나의 상대 경로를 넣으려고 합니다.구성 요소의 변수를 'fullImagePath'로 설정하고 템플릿에 사용했습니다.저는 여러 가지 가능한 길을 시도해 보았지만, 제 이미지가 떠오르지 않는 것 같습니다.Angular2에는 장고와 같은 정적 폴더에 항상 상대적인 특별한 경로가 있습니까?

요소

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

각도만 다음을 가리킵니다.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'생성자에 있습니다.그것은 확실히 효과가 있을 것입니다.

저는 Asp를 사용하고 있습니다.Angular 4 프론트 엔드와 웹 팩이 있는 Net Core Angular 템플릿 프로젝트.이미지 이름 앞에 '/dist/assets/images/'를 사용하고 이미지를 dist 디렉토리의 자산/images 디렉토리에 저장해야 했습니다.예:

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

자산 폴더에 이미지를 넣기만 하면 됩니다.html페이지 또는ts해당 링크가 있는 파일입니다.

각도에서 서버에서 하나의 페이지, 즉 index.html만 요청됩니다.그리고 index.html과 자산 폴더는 동일한 디렉토리에 있습니다.모든 구성 요소에 이미지를 넣는 동안 src 값은 다음과 같습니다.assets\image.png브라우저가 해당 이미지를 서버에 요청하고 웹 팩이 해당 이미지를 서비스할 수 있기 때문에 잘 작동합니다.

이렇게 사용할 수 있습니다.

div 배경 이미지의 경우

<div style="min-height: fit-content;
background-image: url('/assets/Get-started-section.jpg'); background-size: cover; background-position:center;
width: 100%; ">
</div>

그리고 img는

 <img src="/assets/Get-started-section.jpg"/>

언급URL : https://stackoverflow.com/questions/40230473/how-to-serve-up-images-in-angular2