Typescript项目中import图片时报错：Cannot find module '.../*.png'. TS2307

问题

• 在React+Typescript项目中导入图片时，报错：

解决方案

• 在js中引入本地静态资源图片时，使用import lockIcon from '@assets/imgs/lock.gif这种写法是没有问题的；
• 但在Typscript中是无法识别非代码资源的，所以会报错TS2307: cannot find module '.gif'；
• 因此我们需要声明一个module：
  • 新建一个ts声明文件，如：images.d.ts，这样ts就可以识别svg、png、jpg等图片类型文件；
  • 项目编译过程中会自动去读取.d.ts这种类型的文件，所以不需要我们手动地加载他们；
  • 当然.d.ts文件也不能随便在项目中放置，这类文件和ts文件一样需要被Typescript编译，所以只能放置在tsconfig.json中include属性所配置的文件夹下，如：src目录下；
  • images.d.ts内容如下：

    declare module '*.svg'
    declare module '*.png'
    declare module '*.jpg'
    declare module '*.jpeg'
    declare module '*.gif'
    declare module '*.bmp'
    declare module '*.tiff'