Vue 和 Typescript：找不到图像导入

Question

问题

我目前正在使用 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：

Answer 1

在/src/ 中创建一个名为shims-png.d.ts 的文件，内容如下：

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

停止并再次运行应用程序。