如何在Angular2中投放图片？

我正在尝试在Angular2应用程序的图像src标签中的资产文件夹中放置我的图像之一的相对路径。我在组件中将变量设置为“ 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'在构造函数中一样添加图像路径。它肯定会工作。

我正在使用带有Angular 4前端和webpack的Asp.Net Core角度模板项目。我必须在映像名称前面使用“ / dist / assets / images /”，并将映像存储在dist目录中的assets / images目录中。例如：

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

只需将您的图片放在素材资源文件夹中，然后在具有该链接的html页面或ts文件中引用它们即可。

如果使用角度，则仅从服务器请求一页，即index.html。并且index.html和Assets文件夹在同一目录中。在将图片放入任何组件时给出src值，如assets\image.png。这将正常工作，因为浏览器将向服务器请求该图像，并且webpack将能够提供该图像。