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

在我的项目中，我在 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}} />

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

---

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

---

默认情况下，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 配置文件并确保您的资产文件夹已添加到构建选项中。

---

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

示例示例

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

---

通常，“app”是您的应用程序的根——您尝试过 app/path/to/assets/img.png 吗？

---

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

declare var require: any

2.在您的组件类中添加这一行。

imgname= require("../images/imgname.png");

在 html 页面上的 img src 标签中添加这个“imgname”。

---

对我来说，“我”是“图像”中的资本。这也是 angular-cli 不喜欢的。所以它也是区分大小写的。

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

---

您可以在 Angular 8+ 中按照以下步骤操作

第一步：在组件中加载如下图片

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.

按照建议进行操作 - 通过运行 npm install @types/node 将 @types/node 类型添加到您的项目并编辑 tsconfig.app.json 以设置：

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

欲了解更多信息resource

---

它始终取决于引用静态资源（在本例中为图像）路径的 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="">     

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

---