Vue和Typescript：未找到图像导入

Posted 2021-03-30

问题

我目前正在使用Typescript开发一个Vue项目。在我的资产文件夹中，我有一些我想用单独的Typescript文件导入的图像。

---

背景

该项目由vue-cli使用Typescript，版本3.2.1引导。我试过的是使用require直接导入我的文件，但是没有用。然后我尝试用import导入无济于事

---

码

这就是我尝试过的：

./src/myFile.ts
import Image from '@/assets/img/hello.png';

不行

./src/myFile.ts
import Image from '../assets/img/hello.png';

不行

./src/myFile.ts
const Image = require('../assets/img/hello.png');

不行

---

结果

捆绑器将沿Relative modules were not found的行引出错误，然后是文件的路径。我已经确定路径是正确的，我怀疑这与TypeScript如何管理导入以及如何配置Vue-cli来捆绑我的文件有关。

截图

这是实际项目的屏幕截图。文件路径是./src/views/World/Combat/Game.ts：

答案

发现问题：您需要声明以下模块：

declare module "*.png" {
  const value: string;
  export default value;
}