Импорт изображений в TypeScript React - «Не удается найти модуль»

Question

Я пытаюсь импортировать изображения для использования внутри компонента React с TypeScript.Я использую упаковщик 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 подчеркнул '../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

есть обходной путь, например,

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

измените это на

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

Answer 2

создайте файл index.d.ts в папке src и добавьте эту строку

declare module '*.jpg';

Answer 3

Если вы буквально написали "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.

Раунд 2

TypeScript игнорирует index.d.ts, поскольку предполагает, что index.d.ts генерируется из index.tsx и index.tsx с большей вероятностью будет обновлен.Назовите свой index.d.ts файл как-нибудь еще, например, declaration.d.ts.