typescript 在 Visual Studio 代码中添加图像文件

Adding image file in Visual studio code

提问by mruanova

I am creating a project in angular 4 using Visual studio code. How can we add images(local image on my desktop) in the Visual studio code and display in the view?(we can create a model and display the image by the SRC tag but that works for the image hosted in some server).

我正在使用 Visual Studio 代码在 angular 4 中创建一个项目。我们如何在 Visual Studio 代码中添加图像（我桌面上的本地图像）并在视图中显示？（我们可以创建一个模型并通过 SRC 标签显示图像，但这适用于托管在某些服务器中的图像）。

If we cant add the images in Visual studio code then how do we render the local images on the view?

如果我们无法在 Visual Studio 代码中添加图像，那么我们如何在视图上渲染本地图像？

Please help

请帮忙

回答by Sathya

Visual studio code cannot store the image for the Angular application. It is just an editor like notepad with advanced features to make coding a pleasurable experience.

Visual Studio 代码无法存储 Angular 应用程序的图像。它只是一个类似记事本的编辑器，具有高级功能，使编码成为一种愉快的体验。

You could place your image in the folder where you have the package.json file and you could display the image in your app by replacing the web url with just the image name.

你可以将你的图像放在你有 package.json 文件的文件夹中，你可以通过只用图像名称替换 web url 来在你的应用程序中显示图像。

Of course it is better to create a separate folder for images and use the absolute/relative path in your code where you are using the images.

当然，最好为图像创建一个单独的文件夹，并在使用图像的代码中使用绝对/相对路径。

Hope that helps.

希望有帮助。

回答by mruanova

Possible duplicate:

可能的重复：

How to load image (and other assets) in Angular an project?

如何在 Angular 项目中加载图像（和其他资产）？

In my project I am using the following syntax in my app.component.html:

在我的项目中，我在 app.component.html 中使用以下语法：

<img src="assets/img/1.jpg" alt="image">

or

或者

<img src='http://mruanova.com/img/1.jpg' alt='image'>

use [src] as a template expression when you are binding a property using interpolation:

当您使用插值绑定属性时，使用 [src] 作为模板表达式：

<img [src]="imagePath" />

is the same as:

是相同的：

<img src={{imagePath}} />

Source: how to bind img src in angular 2 in ngFor?

来源：如何在 ngFor 中以 angular 2 绑定 img src？