在TypeScript React中导入图像 - "无法找到模块"

Question

我正在尝试导入图像以在使用TypeScript的React组件中使用.我正在使用的捆绑包是Parcel(不是Webpack).

我.d.ts在项目中创建了一个带有图像文件扩展名的文件,并将其包含在里面tsconfig.json.但是,当我尝试导入图像时,T​​S对我大吼大叫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';

然后加入"include": ["./src/index.d.ts"]里面tsconfig.json,后"compilerOptions" : {...}.

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

Answer 1

这个问题可以有很多解决方案

解决方案#1：
使用require包含图像

<img src={require('../../assets/logo.png')} alt="" />

解决方案#2：

而不是将图像导入为 import logo from "../../assets/logo.png"

导入为 const logo = require("../../assets/logo.png");

然后像这样使用它

<img src={logo} alt="" />

解决方案#3： 您的文件夹中
有一个文件。如果您没有看到它，请在名为 的文件夹中创建一个新文件。react-app-env.d.tssrcsrcreact-app-env.d.ts

现在在您的 中react-app-env.d.ts添加此代码。

declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";

解决方案#4： 在您的文件夹中
创建。 然后在其中添加以下文本。declaration.d.tssrc

declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";

现在你必须让你的tsconfig.json样子像这样：

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

解决方案#5：

types在您的文件夹中创建一个文件夹src并添加images.d.ts到该文件夹​​中。在其中添加以下文本。

declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";

tsconfig.json现在像这样配置：

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

Answer 2

创建模块/类型

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

更改 tsconfig.json

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

Answer 3

对于"react": "^18.2.0"Typescript，请执行以下操作：

1. declaration.d.ts在您的目录中创建一个名为：的文件src/。
2. 添加这行代码：

declare module "*.jpg"
declare module "*.png"

就这样，错误应该消失了。

祝你好运！

Answer 4

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

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 5

如果你从字面上写"include": ["./src/index.d.ts"]的tsconfig.json,你没有"files"设定,这意味着通过定义的项目tsconfig.json仅包括单个文件./src/index.d.ts.当您在VS代码中打开任何其他文件时,VS代码使用不使用您的单独的语言服务实例tsconfig.json.调整"include"设置以匹配所有.ts,并.tsx在你的项目文件,或只是将其删除,并依靠包括含有该目录下的所有文件的默认行为tsconfig.json.

第2轮

TypeScript是忽略的,index.d.ts因为它假定它index.d.ts是从最新生成的,index.tsx并且index.tsx更可能是最新的.将您的index.d.ts文件命名为其他内容,例如declaration.d.ts.

Answer 6

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

declare module '*.jpg';

Answer 7

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

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

Answer 8

例如，有一个解决方法，

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

将此更改为

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

Answer 9

我声明了多种图像类型，并且必须将它们放入单独的 .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 等进行调整。