imgUtil.ts 代码

import goodStorage from 'good-storage'

// 图片资源模块接口
interface ImgModule {
  default: string
}

class ImgUtil {
  static loading = false // 用于标识是否已经加载了图片
  // 静态属性对象用于保存key(图片名)/value(图片绝对路径) 
  static imgList: Record<string, string> = {}

  // 从缓存中取图片
  static storageImgList() {
    this.imgList = goodStorage.get('imgList') || {}
    if (this.isEmpty()) {
      this.loadAllImg() // 加载图片名和图片绝对地址
      goodStorage.set('imgList', this.imgList) // 保存到内存中
    }
  }

  // 判断类的 imgList 静态对象是否为空
  static isEmpty() {
    // Object.getOwnPropertyNames 获取 this.imgList 自有属性名组成的数据
    return !Object.getOwnPropertyNames(this.imgList).length
  }

  // 根据 ImgModule 来加载资源
  static loadImgModule(imgModule: Record<string, ImgModule>) {
    let absolutePath = '' // 保存图片绝对路径
    let imgName = '' //保存 图片名
    for (let relativePath in imgModule) {
      absolutePath = imgModule[relativePath].default // 获取图片绝对路径
      // substring 从索引哪个位置开始截取字符串
      // lastIndexOf 获取最后一个 / 所在的索引
      imgName = absolutePath.substring(absolutePath.lastIndexOf('/') + 1) // 根据绝对路径获取图片名
      // 静态方法中的 this 默认指的是类本身
      this.imgList[imgName] = absolutePath
    }
  }

  // 加载图片 静态方法
  static loadAllImg() {
    // 导入 assets/img 文件夹下面的所有 png 模块 , { eager: true } 以同步的方式加载
    const pngMap = import.meta.glob<ImgModule>('../assets/img/**/*.png', { eager: true })
    const jpgMap = import.meta.glob<ImgModule>('../assets/img/**/*.jpg', { eager: true })
    ImgUtil.loadImgModule(pngMap)
    ImgUtil.loadImgModule(jpgMap)
  }

  // 根据图片名获取图片绝对路径 (惰性函数)
  static getImg(imgName: string) {
    if (ImgUtil.loading === false) { // 没有加载图片
      ImgUtil.loading = true
      ImgUtil.storageImgList() // 加载图片
      ImgUtil.getImg = function (imgName: string) {
        return ImgUtil.imgList[imgName]
      }
      return ImgUtil.imgList[imgName]
    }
  }
}

// 默认导出
export default ImgUtil

界面可以正常加载出图片，请问为什么在 vue 组件中使用 ImgUtil 类的静态方法类型报错？如何解决？