如何将图像导入打字稿？他说“找不到模块”

Posted 2023-03-05

【中文标题】如何将图像导入打字稿？他说“找不到模块”

【英文标题】：How can I import an image into typescript? he says "cannot find module"

【发布时间】：2020-04-29 13:57:24

【问题描述】：

我是打字稿的初学者，想知道为什么我不能从我的资产文件夹中导入图像。我有一个图片文件夹，vscode说找不到模块。

这是我得到的错误：

ERROR in src/app/tool-box/tool-box/ao-bar/ao-bar.service.ts:3:19 - error TS2307: Cannot find module '../../../../assets/objects-ao-bar/fabio.png'.
import Fabio from '../../../../assets/objects-ao-bar/fabio.png';
Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.

【问题讨论】：

TypeScript 导入不适用于 PNG（和任何其他资产）。 "import" 用于从其他 *.ts 文件中导入 TypeScript 代码。

我怎样才能导入.png呢？

【参考方案1】：

无需在打字稿中导入图像。您很可能正在尝试在 Angular 项目中添加图像，请参阅 this。

【讨论】：

我想将图像保存在变量中，但是当我从 '../../assets/myimg.png' 导入 myImg 时，找不到图像

您要处理图像位图吗？你将如何在 TypeScript 中使用加载的图像对象？

好吧，我有一个数组，我在其中添加对象，每个对象由 id、name 和 img 组成。然后我将显示图像。我的资产文件夹中有图像，我想将图像保存在一个变量中，以便我可以访问 object.img

在这种情况下，数组中的每个项目都应该包含“id”和“imageUri”（字符串字段，它将存储图像的路径）。稍后您可以在 html 中像 <img [src]="item.imageUri"> 一样绑定它。在 Angular 中，将图像资源加载为 TypeScript 对象是没有意义的。