在 Angular 中添加图像文件

Posted 2023-03-05

【中文标题】在 Angular 中添加图像文件

【英文标题】：Adding image file in Angular

【发布时间】：2017-10-06 11:33:10

【问题描述】：

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

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

请帮忙

【参考方案1】：

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

您可以将您的图片放置在您拥有 package.json 文件的文件夹中，然后您可以通过将 Web url 替换为图片名称来在您的应用中显示该图片。

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

希望对您有所帮助。

【参考方案2】：

可能重复：

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

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

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

或

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

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

<img [src]="imagePath" />

等同于：

<img src=imagePath />

来源：how to bind img src in angular 2 in ngFor?

【讨论】：

我从上一个问题中复制并粘贴了自己的答案，以节省您的点击时间。