在应用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# oryarn create react-app my-app --template typescript那你的src目录下会有一个 react-app-env.d.ts 文件。内容如下：
/// <reference types="react-scripts" />该文件应用三斜线指令引入了react-scripts 的类型申明文件，在指标文件 react-app.d.ts 中申明了各类图片等资源的类型。
文件内容：
/// <reference types="node" />/// <reference types="react" />/// <reference types="react-dom" />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<React.SVGProps< SVGSVGElement > & { 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;}只有tsconfig.json中include蕴含了src目录，就能够失常引入。