在您的 src 目录或任何 rootDir 中创建一个 global.d.ts 文件。

declare module "*.png" {
 export default "" as string
}

这将利用一项资产，本例中为png图像，并清除vscode错误。

我测试了所有的回复，并找到了答案。

首先，在您的路由文件夹中创建一个名为.d.ts的文件。

然后将这些行复制到该文件中。

declare module "*.png" {
  export default "" as string;
}
declare module "*.svg" {
  export default "" as string;
}
declare module "*.jpeg" {
  export default "" as string;
}
declare module "*.jpg" {
  export default "" as string;
}

最后，前往你的路由文件夹中的tsconfig.json文件，并定义新的子元素。

{
   "include": ["src", ".d.ts"]
}

你已经准备好了。

这对我起了作用

declare module "*.png" {
const src: string
export default src
}

上图说明了当您错误引用了路径时，此错误会被误报的情况。请注意，我不小心使用了双引号 "" 开始并以单引号 " 结尾。很容易修复。

我在根目录中添加了文件index.d.ts：

将以下代码粘贴到其中：/// <reference types="react-scripts" />

在tsconfig.json中添加："include": ["src", "index.d.ts"]

当你的src文件夹中没有包含react-app-env.d.ts文件时，就会出现这个错误。因为你需要两行代码来解决这个错误 ==> <reference types="react-scripts" />

如果你尝试在src文件夹中创建index.d.ts文件，并在其中添加declare module '*.jpg';，但它没有起作用，只需将index.d.ts重命名为其他名称，比如export.d.ts。

为了解决这个问题，请在 src/Types 目录下创建一个名为 index.d.ts 的文件。在该文件中添加以下声明：

declare module '*.jpg';

这个声明允许TypeScript识别和导入JPG图像文件，而不会出现任何类型错误。

针对在单体库中遇到此问题的人

首先让我们澄清一件事，我假设您正在使用create react app或vite，并且仍然遇到此问题。尽管这确实不应该有影响。

我是如何陷入这个困境的？

我只是有一个单体库，我正在从根tsconfig.json扩展，这是在整个单体库中保留每个共享配置的地方。因此，在我的单体库中的每个子存储库中都会从它进行扩展。好的，这是我的目录树的样子

|-apps
|---backend
|-----src
|-----tsconfig.json
|---frontend
|-----src
|-----tsconfig.json
|-tsconfig.json

e.x. 应用程序/前端/tsconfig.json

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        /* ... */
    }
}

解决方案 #1

因此，TS 无法找到图像文件的定义。我所做的就是在我的 monorepo 根目录中创建一个名为 declarations.d.ts 的新文件，并将以下代码粘贴到其中：

// images
declare module '*.png' {
    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 '*.jfif' {
    const src: string;
    export default src;
}
declare module '*.pjpeg' {
    const src: string;
    export default src;
}
declare module '*.pjp' {
    const src: string;
    export default src;
}
declare module '*.gif' {
    const src: string;
    export default src;
}
declare module '*.svg' {
    const src: string;
    export default src;
}
declare module '*.ico' {
    const src: string;
    export default src;
}
declare module '*.webp' {
    const src: string;
    export default src;
}
declare module '*.avif' {
    const src: string;
    export default src;
}

解决方案 #2

虽然您可以通过在./apps/frontend/tsconfig.json中删除那个扩展来解决此问题。但我选择删除扩展，因为依赖于Vite比依赖于自己的代码更容易。此外，这样我们就少了一些需要担心的代码。

在 Blitz.js（基于 Next.js）中，这对我来说是有效的：

npx tsc-files --pretty --noEmit next-env.d.ts filenames

在 package.json 文件中：

"lint-staged": {
  "*.{ts,tsx}": "tsc-files --pretty --noEmit next-env.d.ts"
}