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

我对Angular很陌生，所以我不确定这样做的最佳做法。

我使用Angular-CLI和ng new some-project来生成新的应用程序。

它在“ Assets ”文件夹中创建了一个“ Images ”文件夹，因此现在“ My Images ”文件夹src/assets/images

在app.component.html（即应用程序的根）中，我将

<img class="img-responsive" src="assets/images/myimage.png">

当我ng serve来查看我的Web应用程序时，图像不显示。

在角度应用程序中加载图像的最佳做法是什么？

编辑：见下面的答案。我的实际图像名称是使用空格，这是Angular不喜欢的。当我删除文件名中的空格时，图像显示正确。

500053 次浏览
小开

通常“ app ”是应用程序的根目录--你试过app/path/to/assets/img.png吗？

小开
最佳答案

我修好了。我的实际图像文件名中有空格，不知出于什么原因，Angular不喜欢这样。当我从文件名中删除空格时，assets/images/myimage.png起作用了。

小开

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

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

或

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

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

<img [src]="imagePath" />

与以下内容相同：

<img src=\{\{imagePath}} />

来源：_农行_0

小开

特定于Angular2到5，我们可以使用属性绑定绑定图像路径，如下所示。图像路径用单引号括起来。

示例

<img [src]="'assets/img/klogo.png'" alt="image">

小开

1 .将此行添加到组件的顶部。

declare var require: any

2 .将此行添加到组件类中。

imgname= require("../images/imgname.png");
  1. 在HTML页面上的IMG SRC标记中

    添加此“ imgname ”。

    <img src=\{\{imgname}} alt="">

小开
默认情况下

，Angular-CLI在构建选项中包含assets文件夹。当我的图像名称有空格或破折号时，我遇到了这个问题。 例如：

  • “ my-image-name.PNG ”应为“ myimagename.PNG ”
  • “我的图像名称.PNG ”应为“ myimagename.PNG ”

如果您将图像放在assets/IMG文件夹中，那么这行代码应该可以在您的模板中工作：

<img alt="My image name" src="./assets/img/myImageName.png">

如果问题仍然存在，只需检查您的Angular-CLI配置文件，并确保您的Assets文件夹已添加到构建选项中。

小开

为我"；我"；大写是否在"；中图像"；。Angular-CLI也不喜欢。所以它也是区分大小写的。

一些Web服务器（如IIS）在这方面没有问题，如果Angular应用程序托管在IIS中，则区分大小写不是问题。

小开

它始终取决于引用静态资源（在本例中为图像）路径的HTML文件的位置。

示例A：

src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yourpage.html

正如您所看到的，yourpage.HTML与根目录（SRC文件夹）相距一个文件夹，因此，它需要一定数量的../才能返回到根目录，然后您可以从根目录转到图像：

<img class="img-responsive" src="../assests/images/myimage.png">

示例B：

src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yoursubmodule
|__yourpage.html

在这里，你必须去树中的2个文件夹：

<img class="img-responsive" src="../../assests/images/myimage.png">
小开

加载图像时尽量不要留出空间。

而不是

<img src='assets/img/myimage.png' alt="">

作为最佳实践，请尝试使用字符串插值或属性绑定来加载源图像。

小开

您可以在Angular 8+中执行以下步骤

步骤1：在组件中加载如下所示的图像

const logo = require('../assets/logo.svg').default as string;


@Component({
selector: 'app-show-image',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class ShowImageComponent implements OnInit {


logo = logo;
constructor() { }
ngOnInit() { }


}

步骤2：在HTML文件中添加逻辑

<img [src]="logo" [alt]="'logo'">

如果在没有进一步配置的情况下启动，您将看到一个奇怪的错误：

ERROR in src/app/app.component.ts(4,14): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

根据建议执行操作—通过运行NPMinstall @types/node并编辑tsconfig.app.json，将@types/node类型添加到项目中，以设置：

"compilerOptions": {
"types": ["node"],
...
}

了解更多信息 资源


提交答案