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

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

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

Answer 1

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

declare module '*.jpg';

Answer 2

如果你在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。

Answer 3

创建模块/类型

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

更改 tsconfig.json

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

Answer 4

有一个解决方法 例如，

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

改成

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

Answer 5

我已经粘贴了：

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

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

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