Html 如何在 Angular2 中提供图像？

How to serve up images in Angular2?

提问by TJB

I am trying to put the relative path to one of my images in my assets folder in an image src tag in my Angular2 app. I set a variable in my component to 'fullImagePath' and used that in my template. I have tried many different possible paths, but just cannot seem to get my image up. Is there some special path in Angular2 that is always relative to a static folder like in Django ?

我正在尝试将我的图像之一的相对路径放在我的 Angular2 应用程序的图像 src 标签中的资产文件夹中。我在我的组件中将一个变量设置为“fullImagePath”并在我的模板中使用它。我尝试了许多不同的可能路径，但似乎无法提升我的形象。Angular2 中是否有一些特殊的路径总是相对于 Django 中的静态文件夹？

Component

成分

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() {
  }

}

I also put the picture into the same folder as this component, so since the template, and css in the same folder is working I'm not sure why a similar relative path to the image is not working. This is the same component with the image in the same folder.

我还将图片放入与此组件相同的文件夹中，因此由于同一文件夹中的模板和 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

html

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

app tree * I left out the node modules folder to save space

应用程序树 * 我省略了节点模块文件夹以节省空间

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

回答by Babar Bilal

Angular only points to src/assetsfolder, nothing else is public to access via url so you should use full path

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

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

Or

或者

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

This will only work if the base href tag is set with /

这仅在 base href 标签设置为 /

You can also add other folders for data in angular/cli. All you need to modify is angular-cli.json

您还可以为 .csv 文件中的数据添加其他文件夹angular/cli。您只需要修改angular-cli.json

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

Note in edit : Dist command will try to find all attachments from assets so it is also important to keep the images and any files you want to access via url inside assets, like mock json data files should also be in assets.

编辑中的注意事项：Dist 命令将尝试从资产中查找所有附件，因此保留图像和您想通过资产中的 url 访问的任何文件也很重要，例如模拟 json 数据文件也应该在资产中。

回答by Michal Ambro?

If you do not like assets folder you can edit .angular-cli.jsonand add other folders you need.

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

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

回答by Gajanan Kulkarni

Add your image path like fullPathname='assets/images/therealdealportfoliohero.jpg'in your constructor. It will work definitely.

像fullPathname='assets/images/therealdealportfoliohero.jpg'在构造函数中一样添加图像路径。它肯定会起作用。

回答by davaus

I am using the Asp.Net Core angular template project with an Angular 4 front end and webpack. I had to use '/dist/assets/images/' in front of the image name, and store the image in the assets/images directory in the dist directory. eg:

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

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

回答by R.Sarkar

In angular only one page is requested from server, that is index.html. And index.html and assets folder are on same directory. while putting image in any component give src value like assets\image.png. This will work fine because browser will make request to server for that image and webpack will be able serve that image.

在 angular 中，服务器只请求一页，即 index.html。并且 index.html 和 assets 文件夹在同一目录中。将图像放在任何组件中时，都会给出 src 值，例如assets\image.png. 这会正常工作，因为浏览器会向服务器发出该图像的请求，而 webpack 将能够提供该图像。

回答by Abhishek G

Just put your images in the assets folder refer them in your htmlpages or tsfiles with that link.

只需将您的图像放在资产文件夹中，通过该链接在您的html页面或ts文件中引用它们。