Vue & Typescript:找不到图像导入

Joh*_*Cdf 3 typescript vue.js

问题

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


背景

这个项目由 vue-cli 使用 Typescript, version 引导3.2.1。我尝试过的是使用 require 直接导入到我的文件中,但这不起作用。然后我尝试导入import无济于事


代码

这是我尝试过的:

./src/myFile.ts
import Image from '@/assets/img/hello.png';
Run Code Online (Sandbox Code Playgroud)

不起作用

./src/myFile.ts
import Image from '../assets/img/hello.png';
Run Code Online (Sandbox Code Playgroud)

不起作用

./src/myFile.ts
const Image = require('../assets/img/hello.png');
Run Code Online (Sandbox Code Playgroud)

不起作用


结果

打包器会抛出一个错误,Relative modules were not found后面跟着文件的路径。我已确保路径正确,我怀疑这与 TypeScript 如何管理导入以及如何配置 Vue-cli 以捆绑我的文件有关。

截屏

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

Joh*_*Cdf 12

发现问题:您需要像这样声明以下模块:

declare module "*.png" {
  const value: string;
  export default value;
}
Run Code Online (Sandbox Code Playgroud)

  • 只是为了改进上面的答案;您可以创建一个名为“shims-png.d.ts”的文件(其内容将是答案代码)并将其放在与“main.ts”相同的目录中 (8认同)
  • 就我而言,我必须重新启动 VSCode,然后它才会停止显示错误。 (3认同)