Почему я должен использовать «требовать» вместо «импортировать из» для изображения в React?

Question

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

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

Разница, которую я могу себе представить, заключается в том, что яЯ использую TypeScript (переносит мой TSX с помощью awesome-typescript-loader и загружаю мой PNG file-loader ), и они, похоже, используют JSX.Но насколько я понимаю, все это переносится на простой JS, и требует в конце.

Будучи новичком в React, я не уверен, в чем причина этого несоответствия но также Я не уверен, что гуглить, чтобы исследовать себя.

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

Эта проблема не имеет ничего общего с веб-пакетом или каким-либо пакетом и не является проблемой с машинописью.

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

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

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

Я создал пример проекта в узле для тестирования:

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

Answer 4

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

Создайте declarations.d.ts

Обновите свой tsconfig.json

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

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

declare module '*.png';

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