解决ts开发时引入图片报错（“找不到xxx或其相应的类型声明”|解决ts开发时引入图片报错：“找不到xxx或其相应的类型声明” 的问题）解决ts开发时引入图片报错：“

在使用ts开发时,引入图片报错

import img from '../../assets/images/foo.png';

找不到模块“../../assets/images/foo.png”或其相应的类型声明。

因为typescript无法识别非代码资源。我们需要主动的去声明这个module
方法一：来源：参考链接
新建一个ts声明文件：images.d.ts

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

项目编译过程中会自动去读取.d.ts这种类型的文件，所以不需要我们手动加载。放置在tsconfig.json中include属性所配置的文件夹下即可。
方法二：
如果你的项目在创建时使用：

npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript

那你的src目录下会有一个 react-app-env.d.ts 文件。内容如下：

///

该文件使用三斜线指令引入了react-scripts 的类型声明文件，在目标文件 react-app.d.ts 中声明了各类图片等资源的类型。
文件内容：

/// /// /// declare namespace NodeJS { interface ProcessEnv { readonly NODE_ENV: 'development' | 'production' | 'test'; readonly PUBLIC_URL: string; } }declare module '*.avif' { const src: string; export default src; }declare module '*.bmp' { const src: string; export default src; }declare module '*.gif' { const src: string; export default src; }declare module '*.jpg' { const src: string; export default src; }declare module '*.jpeg' { const src: string; export default src; }declare module '*.png' { const src: string; export default src; }declare module '*.webp' { const src: string; export default src; }declare module '*.svg' { import * as React from 'react'; export const ReactComponent: React.FunctionComponent & { title?: string }>; const src: string; export default src; }declare module '*.module.css' { const classes: { readonly [key: string]: string }; export default classes; }declare module '*.module.scss' { const classes: { readonly [key: string]: string }; export default classes; }declare module '*.module.sass' { const classes: { readonly [key: string]: string }; export default classes; }

【解决ts开发时引入图片报错（“找不到xxx或其相应的类型声明”|解决ts开发时引入图片报错：“找不到xxx或其相应的类型声明” 的问题）】只要tsconfig.json中include包含了src目录，就可以正常引入。