TypeScript を使用して React コンポーネント内で使用する画像をインポートしようとしています。使用しているバンドラーは Parcel (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 がスローしているエラーを修正するにはどうすればよいですか?
ベストアンサー1
index.d.tsフォルダー内にファイルを作成しsrc、次の行を追加します。
declare module '*.jpg';