在 TypeScript React 中导入图像 - "Cannot find module"

Question

我正在尝试导入图像以在带有 TypeScript 的 React 组件中使用。我使用的打包器是 Parcel（不是 Webpack）。

我在项目中创建了一个带有图像文件扩展名的 .d.ts 文件，并将其包含在 tsconfig.json 中。但是，当我尝试导入图像时，TS 对我大喊 Cannot find module。

我的项目结构：

+ src
  + assets
    - image.jpg
  + components
    - Box.tsx
    - App.tsx
  - index.d.ts
  - index.html
  - index.tsx
- tsconfig.json
- tslint.json

我试过像这样导入App.tsx中的图片。 VS Code 下划线 '../assets/image.jpg' 表示 Cannot find module '../assets/image.jpg'.

import * as React from 'react';
import * as img from '../assets/image.jpg';

const Box = props => {
  // do things...
}

export default Box;

我在网上找到的讨论指出需要自己定义一个 .d.ts 文件，所以我用这一行创建了那个 index.d.ts 文件。

declare module '*.jpg';

然后在tsconfig.json里面加上"include": ["./src/index.d.ts"]，在"compilerOptions" : {...}之后。

我错过了什么？我该如何修复 TS 抛出的错误？

Answer 1

如果你在 tsconfig.json 中直接写了 "include": ["./src/index.d.ts"] 而你没有 "files" 设置，这意味着 tsconfig.json 定义的项目只包含单个文件./src/index.d.ts。当你在 VS Code 中打开任何其他文件时，VS Code 使用一个单独的语言服务实例，它不使用你的 tsconfig.json。调整您的 "include" 设置以匹配项目中的所有 .ts 和 .tsx 文件，或者只是删除它并依赖于将所有文件包含在包含 [=11= 的目录下的默认行为].

第 2 轮

TypeScript 忽略了 index.d.ts，因为它假定 index.d.ts 是从 index.tsx 生成的，而 index.tsx 更有可能是最新的。将您的 index.d.ts 文件命名为其他名称，例如 declaration.d.ts.

Answer 2

有解决办法例如，

import logo from "../../assets/logo.png"

将此更改为

const logo =  require("../../assets/logo.png")

Answer 3

在文件夹 src 中创建 index.d.ts 文件，并添加此行

declare module '*.jpg';

Answer 4

我已粘贴：

/// <reference types="react-scripts" />

来自我的一个较旧的项目：react-app-env.d.ts 并且有效。

在 CRA 的最新版本中（当 TS 是所选语言时），此文件会自动添加到 src 文件夹并包含上面显示的单行。它是从 react-scripts.

引用类型的指令

Answer 5

创建module/type

# src/types/images.d.ts
declare module '*.jpg';
declare module '*.jpeg';

改变tsconfig.json

{
    "compilerOptions": {
        "typeRoots" : ["node_modules/@types", "src/types"]
    }
}

Answer 6

应该有一个名为“react-app-env.d.ts”的文件是在您使用 create-react-app 时创建的。此文件类所有类型的图像文件以及更多可以导入的模块。在文件中应该有以下内容：

/// <reference types="react-scripts" />

Answer 7

如果您没有在 src 文件夹中包含 react-app-env.d.ts 文件，就会发生此错误因为你需要两行代码来摆脱这个错误 ==> <reference types="react-scripts" />

Answer 8

这花了我大约一个小时，所以我将保留对我有用的解决方案。

Matt McCutchen 的解决方案对我成功了一半，但我仍然面临 VSCode 错误。为了解决这个问题，我将 tsconfig.json 和 index.d.ts 移到了根目录，而不是 src。现在您希望 tsconfig.json 看起来像这样：

"include": ["src", "index.d.ts"]

对于您的 index.d.ts，这个：

declare module '*.png';
declare module '*.jpg';

（^ 调整您的打字需求）

Answer 9

这对我有用

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

Answer 10

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

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

这将使用资产，在本例中为 png 图像，并清除 vscode 错误

Answer 11

我声明了多种图像类型，并且不得不将它们放在 单独的 .d.ts 文件中 以使 VS Code 满意：

src/types/image.jpg.d.ts:

declare module '*.jpg' {
  import { ImageSourcePropType } from 'react-native'

  const content: ImageSourcePropType

  export default content
}

src/types/image.png.d.ts:

declare module '*.png' {
  import { ImageSourcePropType } from 'react-native'

  const content: ImageSourcePropType

  export default content
}

src/types/image.svg.d.ts:

declare module '*.svg' {
  import React from 'react'
  import { SvgProps } from 'react-native-svg'

  const content: React.FC<SvgProps>

  export default content
}

无需调整 tsconfig 等。

在 TypeScript React 中导入图像 - "Cannot find module"

Importing images in TypeScript React - "Cannot find module"

reactjs

typescript

visual-studio-code

bundler

parceljs

第 2 轮