116

我正在尝试导入图像以在带有 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 抛出的错误？

4

9 回答 9

112

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

declare module '*.jpg';
于 2019-07-24T06:27:58.110 回答
90

如果您从字面上写入并且没有设置"include": ["./src/index.d.ts"]，则意味着由定义的项目仅包含单个文件。当您在 VS Code 中打开任何其他文件时，VS Code 会使用一个单独的语言服务实例，该实例不使用您的. 调整您的设置以匹配项目中的所有和文件，或者只是将其删除并依赖默认行为，即在包含.tsconfig.json"files"tsconfig.json./src/index.d.tstsconfig.json"include".ts.tsxtsconfig.json

第二轮

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

于 2018-10-11T12:58:29.147 回答
63

创建模块/类型

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

更改 tsconfig.json

{
    "compilerOptions": {
        "typeRoots" : ["node_modules/@types", "src/types"]
    }
}
于 2020-09-14T13:45:26.813 回答
12

例如，有一个解决方法，

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

将其更改为

const logo =  require("../../assets/logo.png")
于 2019-06-19T21:04:51.913 回答
6

这花了我大约一个小时，所以我要离开对我有用的解决方案。

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';

（^ 调整您的打字需求）

于 2022-01-09T03:54:50.757 回答
3

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

/// <reference types="react-scripts" />
于 2021-12-31T18:37:00.820 回答
0

我已经粘贴了：

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

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

在最新版本CRA（when TSis the selected language）中，此文件会自动添加到 src 文件夹并包含上面显示的单行。它是一个从 中引用类型的指令react-scripts。

于 2020-04-29T02:19:21.787 回答
0

当您没有在 src 文件夹中包含react-app-env.d.ts 文件时会发生此错误，因为您需要两行代码才能摆脱此错误 ==> <reference types="react-scripts" />

于 2022-01-01T07:54:35.060 回答
0

这对我有用

declare module "*.png" {
const src: string
export default src
}
于 2022-01-16T12:10:22.553 回答