TypeScript项目中import 图片时报错

在做数据可视化项目时遇到的问题


解决:
  如果在js中引入本地静态资源图片时使用import image from '../image/1.png'这种写法是没有问题的,但是在typscript中是无法识别非代码资源的,所以会报错TS2307: cannot find module '.png'。因此,我们需要主动的去声明这个module
新建一个ts声明文件如:customs.d.ts(如下)就可以了。文件名不重要,但后缀要为.d.ts
加入下边这段代码

declare module '*.png' {
    const value: any;
    export = value;
}

这样ts就可以识别svg、png、jpg等等图片类型文件。项目编译过程中会自动去读取.d.ts这种类型的文件,所以不需要我们手动地加载他们。当然.d.ts文件也不能随便放置在项目中,这类文件和ts文件一样需要被typescript编译,所以一样只能放置在tsconfig.json中include属性所配置的文件夹下。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容