116

TypeScript を使用して React コンポーネント内で使用するイメージをインポートしようとしています。私が使用しているバンドラーは (Webpack ではなく) Parcel です。

.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 がスローしているエラーを修正するにはどうすればよいですか?

4

9 に答える 9

112

index.d.tsフォルダにファイルを作成しsrc、この行を追加します

declare module '*.jpg';
于 2019-07-24T06:27:58.110 に答える
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 に答える
0

このエラーは、 react-app-env.d.tsファイルを src フォルダーに含めなかった場合に発生します 。このエラーを取り除くには 2 行のコードが必要です ==> <reference types="react-scripts" />

于 2022-01-01T07:54:35.060 に答える