在 TypeScript React 中导入图像 - “找不到module”

IT技术 reactjs typescript visual-studio-code bundler parceljs
2021-04-13 00:33:30

我正在尝试使用 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 抛出的错误？

5个回答

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

declare module '*.jpg';
奇怪的是，如果我在 vs 代码中关闭 index.d.ts 文件。然后错误返回。只有当文件打开时它才能工作。有谁知道为什么？
2021-06-07 00:33:30
有效，但你能告诉我为什么以及如何工作吗？这是否与typescript有关，还是 vscode？是否就像忽略所有类似 linting 问题的错误？请澄清。谢谢。
2021-06-18 00:33:30
@Rishav我认为它的简写声明特定typescriptlang.org/docs/handbook/modules.html All imports from a shorthand module will have the any type.
2021-06-18 00:33:30

如果你从字面上写"include": ["./src/index.d.ts"]的tsconfig.json，你没有"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.

您的第 2 轮是不断给予的礼物。您刚刚用 index.d.ts 和 SVG 解决了我的问题，谢谢！
2021-05-28 00:33:30
我确实是字面上写的"include": ["./src/index.d.ts"]😅。现在我已经删除了该行并重新启动了 VS Code，但问题仍然存在 ( Cannot find module '../assets/image.jpg')。问题可能是由捆绑程序引起的吗？但是如果 VS Code 使用单独的语言服务，我认为使用哪个 bundler 并不重要。
2021-06-01 00:33:30
哇，这太神奇了，非常感谢！！我几乎整个上午都在试图弄清楚为什么它不起作用:)))
2021-06-08 00:33:30
没关系，我想我发现了问题。请参阅更新的答案。
2021-06-14 00:33:30

创建module/类型

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

更改 tsconfig.json

{
    "compilerOptions": {
        "typeRoots" : ["node_modules/@types", "src/types"]
    }
}
嗨，我想挖掘一下，因为我已经创建了 types/images.d.ts 并且这个 typeRoots 选项没有帮助，但是同样的声明 - include 中的“src/types”有效，现在我的包含看起来像“include” : ["src/*", "src/types"]，它有点像复制路径，因为 src/* 也应该涵盖第二个用例，但它没有。为什么包含工作而 typeRoots 没有，因为“'typeRoots' 指定了转译器应在其中查找类型定义的根文件夹”
2021-06-07 00:33:30

例如，有一个解决方法，

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

将此更改为

const logo =  require("../../assets/logo.png")
会给你一个错误 require statement not part of an import statement
2021-05-23 00:33:30
如果您使用的是 react < 17.0.1、17.0.1 及更高版本，则 require 有效，请使用 import
2021-05-26 00:33:30
安装 requireJS（或者是 commonJS）
2021-06-12 00:33:30

我已经粘贴了：

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

来自 my: 中的一个较旧的项目react-app-env.d.ts ，它奏效了。

在CRA(when TSis selected language)的最新版本中，此文件会自动添加到 src 文件夹并包含上面显示的单行。它是从react-scripts.

@MichaelEakins 第二行实际上确实清除了错误，而不是像您建议的那样抑制它。对于这个问题中描述的问题，第一行几乎没用。
2021-05-25 00:33:30
它们不仅仅是评论。就 JavaScript 而言，是的，它们是注释。但是，第一行是 eslint 的指令，以忽略下一行的 linting 规则。Eslint 在 linting 代码之前查找这些类型的注释。第二行是一种在typescript文件中引用类型的方法。参见 -> typescriptlang.org/docs/handbook/triple-slash-directives.html
2021-05-26 00:33:30
两行都是注释？
2021-06-12 00:33:30
抑制错误并不能解决根本问题，而且是一种糟糕的做法！
2021-06-16 00:33:30
其它你可能感兴趣的问题
上一篇React 不会关闭自动完成功能 下一篇在 React 中按下回车键时如何获取 TextField 值？