Блог

Главная - Вопросы по программированию - Фоновое изображение не отображается при сборке реакции

Фоновое изображение не отображается при сборке реакции

#javascript #css #reactjs #webpack

#javascript #css #reactjs #webpack

Вопрос:

У меня есть компонент, структурированный следующим образом:

<div style={{ backgroundImage: `url(${require("src/assets/images/loginImage.png")})`, backgroundSize: 'cover' }}>

моя структура папок следующая : Структура папок

Теперь фоновое изображение отображается правильно при локальном запуске. Но когда я создаю и развертываю онлайн, изображение не отображается.

Забавно то, что значки загружаются без проблем, и я ссылаюсь на них таким же образом

Кто-нибудь из вас имеет представление о том, почему это происходит?

Спасибо

Ответ №1:

вы можете попробовать это

 Import loginImageFrom "src/assets/images/loginImage.png";

<div style={{ backgroundImage: `url(${loginImage})`,backgroundSize: 'cover' }}>

Комментарии:

1. Это работает, хотя, если я использую ../ ../assets… Спасибо!

2. попробуйте использовать относительный путь вместо абсолютного.

Ответ №2:

Если вы используете react, шаблон заключается в использовании инструкций import вместо require. На основе вашей конфигурации Webpack вы, возможно, не сможете использовать встроенное требование.

«Динамический импорт не позволяет статическому анализатору определить, действительно ли когда-либо вызывался импортированный код.

… Авторы спецификации модулей ES2015 решили эту проблему в спецификации импорта. Они сделали это, запретив динамическое использование импорта. Это недопустимый javascript:»

В документах CreateReactApp также указано использование инструкций импорта. Ссылки на документы приведены ниже

 import loginImage from "src/asets/images/loginImg.png"

<div style={{ backgroundImage: `url(${loginImage})`, backgroundSize: 'cover' }}>

Смотрите React Import vs Require

В качестве документов для создания приложения React