Блог

Главная - Вопросы по программированию - При использовании библиотеки пользовательского интерфейса Material я не могу изменить изображение шаблона — как изменить случайный всплеск, чтобы установить изображение?

При использовании библиотеки пользовательского интерфейса Material я не могу изменить изображение шаблона — как изменить случайный всплеск, чтобы установить изображение?

#css #reactjs #material-ui

Вопрос:

Итак, в последнее время я играл с Material-UI, пытаясь понять его. Я использовал их шаблон «Вход со стороны». Все работает хорошо, за исключением одной вещи. Ниже приведен пример кода шаблона, который я хочу изменить (просто обратите внимание, я добавил только соответствующую область).

  const useStyles = makeStyles((theme) => ({
  root: {
    height: '100vh',
  },
  image: {
    backgroundImage: 'url(https://source.unsplash.com/random)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },

В частности, та backgroundImage часть. У меня есть локальное изображение, сохраненное в пути от этого ‘../Login/BackgroundImg1.jpg » и он импортирован правильно. Я добавил его в нижнюю часть страницы, чтобы проверить, правильно ли он отображается, и это было так, но всякий раз, когда я пытаюсь добавить его в этот код — ничего, просто белый экран — никаких ошибок, просто пусто.

Я перепробовал все методы, какие только мог придумать, и просмотрел Стек, YouTube и другие случайные блоги, чтобы попытаться найти, что я делаю неправильно. Прямо сейчас я почти уверен, что упускаю что-то маленькое, и мне просто нужно, чтобы кто-то еще посмотрел на это.

Любая помощь будет весьма признательна.

ИЗМЕНИТЬ: Пожалуйста, ознакомьтесь с изменениями, которые я попытался внести ниже:

 image: {
  backgroundImage: 'url(../Login/BackgroundImg1.jpg)',
  backgroundRepeat: 'no-repeat',
  backgroundSize: 'cover',
  backgroundPosition: 'center',

},
Я также попробовал следующее, так как я импортировал изображение, используя как url, так и src

 image: {
  backgroundImage: 'url(${BackgroundImg1})', 
  backgroundRepeat: 'no-repeat',
  backgroundSize: 'cover',
  backgroundPosition: 'center',

},

Как я уже упоминал выше, я уверен, что мне не хватает чего-то простого, потому что я уже целый день смотрю на этот код.

О, и вот изображение инструментов разработки, стилей для элемента. Инструменты разработки - Стили, ориентированные на элемент изображения - это шаблон как есть без изменений.

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

1. Привет, Никсериан, не могли бы вы опубликовать пример того, как вы отредактировали свойство «BackgroundImage»? Кроме того, если вы используете инструменты разработчика в своем браузере и фокусируетесь на этом элементе, что вы видите на панели «стили»? Это поможет вам устранить эту проблему

2. Отредактирую пост сейчас с тем, что я сделал — и сделаю снимок экрана панели стилей

3. Спасибо, это помогло бы 🙂 На панели «Стили» только атрибут «фоновое изображение» действительно полезен для просмотра при применении изменений в коде

4. используйте обратные ссылки вместо одинарных кавычек при использовании импортированного изображения, которое должно исправить это

5. Да, в этом-то и проблема. Единственное, что нужно изменить, — это обратные ссылки вместо одинарных кавычек

Метки: ,