Question

我正在尝试导入图像以在带有TypeScript的React组件中使用。我正在使用的捆绑器是包裹（不是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';

然后在"include": ["./src/index.d.ts"]之后在tsconfig.json内添加"compilerOptions" : {...}。

我想念什么？如何解决TS抛出的错误？

Answer 1

创建模块/类型

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

更改tsconfig.json

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

Answer 2

如果您在"include": ["./src/index.d.ts"]中实际写了tsconfig.json，但是没有"files"设置，则意味着tsconfig.json定义的项目仅包含单个文件{{ 1}}。当您在VS Code中打开任何其他文件时，VS Code使用一个单独的语言服务实例，该实例不使用您的./src/index.d.ts。调整tsconfig.json设置以匹配项目中的所有"include"和.ts文件，或者只是删除它，然后依靠默认行为将所有文件包括在包含{{1}的目录下}。

第二回合

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

Answer 3

有一个解决方案例如，

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

将此更改为

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

Answer 4

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

declare module '*.jpg';

Answer 5

我粘贴了：

// eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

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

Answer 6

只需添加一条注释，告诉编译器忽略下一行的错误。

// @ts-ignore
import * as img from '../assets/image.jpg';

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

6 个答案:

第二回合