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

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

0 голосов
/ 11 октября 2018

Я пытаюсь импортировать изображения для использования внутри компонента 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?

Ответы [ 3 ]

0 голосов
/ 20 июня 2019

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

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

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

const logo =  require("../../assets/logo.png")
0 голосов
/ 24 июля 2019

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

declare module '*.jpg';
0 голосов
/ 11 октября 2018

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

...