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

我正在尝试导入图像，以便在使用 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 代码下划线的 '../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 抛出的错误？

152140 次浏览
小开
最佳答案

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

第二回合

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

小开

有一个工作围绕着它 比如说,

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

把这个改成

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

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

declare module '*.jpg';
小开

我粘贴了:

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

从一个旧的项目在我的: react-app-env.d.ts和它的工作。

在 CRA的最新版本中(当选择 TS语言时) ，这个文件会自动添加到 src 文件夹中，并包含上面显示的单行代码。它是从 react-scripts引用类型的指令。

小开

创建模块/类型

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

更改 tsconfig.json

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

应该有个文件叫做“ response-app-env”。“ d.ts”，它是在使用 create-response-app 时创建的。此文件将所有类型的图像文件分类，并将更多类型的图像文件分类为可导入的模块。文件内应有以下内容:

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

如果在 src 文件夹中没有包含 反应-应用-环境文件，则会发生此错误 因为您需要两行代码来消除这个错误 = = > <reference types="react-scripts" />

小开

这花了我大约一个小时，所以我要离开的解决方案，为我工作。

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

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

至于你的索引，这个:

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

(^ 调整您的打字需求)

小开

这招对我很管用

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

在 src 目录或任何 rootDir 中创建 global.d.ts 文件

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

这将利用一个资产，在本例中为 png 映像，并清除 vscode 错误

小开

我声明了多个图像类型，并且必须将它们放在 独立的 DTS 文件中以使 VS 代码满意:

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

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


const content: ImageSourcePropType


export default content
}

Src/type/image. png. d.ts:

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


const content: ImageSourcePropType


export default content
}

Src/type/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 等进行调整。

小开

这个问题可以有很多解决办法

解决方案一:
使用 require包含图像

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

解决方案二:

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

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

那就像

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

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

现在在 react-app-env.d.ts中，添加这个代码。

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

解决方案四:
在 src文件夹中创建 declaration.d.ts。
然后在其中添加以下文本。

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

现在你必须让你的 tsconfig.json看起来像这样:

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

enter image description here

解决方案五:

在 src文件夹中创建一个 types文件夹，并在此文件夹中添加 images.d.ts。 在其中添加以下文本。

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

现在像这样配置 tsconfig.json:

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

enter image description here

小开

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

首先，在路由文件夹中创建一个名为 .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 文件，并定义 new child。


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

你可以走了。

小开

对于带打字机的 "react": "^18.2.0"，请执行以下操作:

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

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

就是这样，错误应该被关闭。

好锁！


提交答案