Почему я должен использовать " require "вместо" import from " для изображения в React?

Я вижу ответ показывает синтаксис для импорта изображений, как показано ниже (закомментирован). В моем случае это не сработало (жалуясь, что в этом файле нет модулей), и мне пришлось переключиться на синтаксис, который в настоящее время активен.

// import Author from "../assets/author.png";
var Author = require("../assets/author.png");

разницу я могу себе представить, что я использую машинописного текста (transpiling мой ЦХ по удивительный-typescript-загрузчик и загрузка моего PNG ) и они, похоже, используют JSX. Но как далеко мое понимание идет, это все transpiles в обычный JS и требуются в конце.

будучи noob на React, я не уверен, в чем причина этого несоответствия , но и я не уверен,что google для себя исследовать.

9
reactjs typescript webpack webpack-4

4 ответов

вы можете объявить модуль для ваших изображений следующим образом:

declare module "*.png" {
  const value: any;
  export default value;
}

затем вы сможете импортировать свое изображение следующим образом:

import AuthorSrc from "../assets/author.png";

это происходит потому, что webpack не поддерживает импорт изображений из коробки. Поэтому вам нужно добавить правило для этого в конфигурационный файл webpack. Когда вы добавляете новое правило, TypeScript автоматически этого не знает, поэтому вам нужно объявить новый модуль для решения этой проблемы. Без модуля, вы сможете импортировать изображения, но TypeScript выдаст ошибку, потому что вы не сказали, что это возможно.

1

Это больше проблема с typescript, чем сам webpack, вам может потребоваться объявить модули в файле объявления.

создать declarations.d.ts

обновите tsconfig.в JSON

"include": [
    "./declarations.d.ts",
],

поместите это в этот файл:

declare module '*.png';

ошибка может исчезнуть.

5

эта проблема не имеет ничего общего с webpack или любым bundler и не совсем проблема с typescript.

Typescript заявил `что"require ("путь") - это способ включить модули в область вашего текущего модуля, в то время как он также может использоваться для чтения некоторых случайных файлов (например, файлов json).

Как указано в Vincent и Playma256, можно объявить подстановочный знак модуля в соответствии с определенными типами файлов, чтобы импортировать его как оператор импорта. Но вы не нужно этого делать. Typescript не даст вам ошибку, если вы пытаетесь импортировать png или JSON-файл (tslint может, но это зависит от вашей конфигурации).

кстати, если ваше объявление находится в исходной папке проекта, как определено в tsconfig.json, вам не нужно включать его, как указано в Playma256.

Я создал образец проекта в node для вас тест:

https://github.com/rodrigoelp/typescript-declare-files

1

Я думаю, вы можете решить эту проблему с помощью Webpack&&typescript.Официальном сайте webpack ввел что-то об этом https://webpack.js.org/guides/typescript/ И я попробовал это сам. https://github.com/reactpersopnal/webpack-root/tree/feature/typescript Причина в том, что вы хотели бы использовать некодовые активы с TypeScript, поэтому нам нужно отложить тип для этих импорта для webpack. Ваш может просто добавить заказ.д.ТС. 

declare module "*.jpg" {
    const content: any;
    export default content;
}
1