在vue组件的ts脚本中导入图片

原先我是这么导入图片的，可以看到我加了一些eslint-disable注释：

// eslint-disable-next-line @typescript-eslint/no-var-requires
const onLight = require("../imgs/light-on.png");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const offLight = require("../imgs/light-off.png");
           

我希望使用import导入图片，改成：

import onLight from "../imgs/light-on.png";
import offLight from "../imgs/light-off.png";
           

编辑器显示can not find module …

编译器也报告同样的错误。

解决办法：

在src下创建typings目录，添加img.d.ts，内容如下：

declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";
declare module "*.tiff";
           

这样就可以编译通过了。但是编辑器仍然显示上述错误，但是已经无关紧要了。