Невозможно импортировать изображения в Reactjs с помощью require()
Вот в чем дело, когда я открыл свой проект реагирования, все изображения перестали появляться, это произошло внезапно, так как он работал пару часов назад. Кажется, это проблема с тем, как они импортируются, метод, который я всегда использовал, это src = {require(./Picture)}, я также пробовал с const logo = require('logo') src = {logo} и import logo from './logo.png' с единственным рабочим, который упоминается последним.
При отладке этого каждый google указывал, что проблема связана с зависимостью, называемой webpack, которую я пытался удалить и переустановить, а также установить более старую версию, но ничего не сработало.
Любая идея о том, что могло быть причиной этого?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы используете create-react-app и require для импорта изображений, require возвращает модуль ES вместо строки. Это потому, что в file-loader опция esModule включена по умолчанию.
Просто убедитесь, что вы импортируете изображения одним из следующих способов:
const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';
Так
src = {require(./Picture)}должно бытьsrc = {require(./Picture).default}const logo = require('logo')должно бытьconst logo = require('logo').defaultimport logo from './logo.png'должно просто работать
Это сработало отлично, большое спасибо. Зачем вдруг понадобился .default?, пару часов назад и без него работало нормально
Если вы не обновили свои зависимости, это действительно странно. Не уверен, что изменилось.
Вы используете приложение create-реагировать?