Question

我正在尝试将我的一个图像的相对路径放在我的Angular2应用中的图像src标记中的assets文件夹中。我在我的组件中将变量设置为'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>

app tree *我遗漏了节点模块文件夹以节省空间

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

Angular仅指向src/assets文件夹，没有其他内容通过网址公开访问，因此您应该使用完整路径

 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数据文件也应该在资产中。

Answer 2

如果您不喜欢资源文件夹，可以编辑.angular-cli.json并添加所需的其他文件夹。

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

Answer 3

在构造函数中添加fullPathname='assets/images/therealdealportfoliohero.jpg'之类的图像路径。它肯定会工作。

Answer 4

我正在使用带有Angular 4前端和webpack的Asp.Net Core角度模板项目。我不得不使用＆＃39; / dist / assets / images /＆＃39;在图像名称前面，并将图像存储在dist目录中的assets / images目录中。例如：

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

Answer 5

只需将您的图片放入资源文件夹，就可以在html页面或ts文件中引用它们。

Answer 6

在角度模式下，仅从服务器请求一页，即index.html。并且index.html和Assets文件夹在同一目录中。同时将图片放入任何组件时，请提供src值，例如assets\image.png。这将很好地起作用，因为浏览器将向服务器请求该图像，而webpack将能够提供该图像。

如何在Angular2中提供图像？

6 个答案: