После обновления фоновое изображение возвращается к значению по умолчанию - PullRequest
Новая
       6

После обновления фоновое изображение возвращается к значению по умолчанию

0 голосов
/ 31 марта 2020

Используя React, я могу найти его там, где пользователь может go перейти на свою страницу настроек и щелкнуть изображение, которое он хочет сделать своим фоном. Используя манипуляции с DOM, все работает! Однако после обновления страницы (или возврата на сайт после закрытия вкладки) фон возвращается к изображению по умолчанию, которое у меня есть в CSS.

Можете ли вы написать что-то, что изменяет URL фонового изображения навсегда?

Вот моя фоновая карта. js компонент: 

  export default function BackgroundCard(props) {
  var body = document.getElementById("body");

  function setBackground() {
    body.style.backgroundImage = `url(${props.image})`;
  }

  return (
    <Card style={{ maxWidth: 275, marginTop: 10 }}>
      <CardActionArea>
        <CardMedia
          height="300"
          component="img"
          image={props.image}
          title={props.title2}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {props.title}
          </Typography>
          <div style={{ display: "flex", alignItems: "center" }}>
            <Button
              id="bgImg"
              variant="contained"
              style={{ marginTop: 10 }}
              onClick={setBackground}
            >
              Select
            </Button>
          </div>
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

1 Ответ

0 голосов
/ 31 марта 2020

Вы можете попытаться сохранить его выбор в localStorage или cookie или лучше в его профиле в базе данных, но я не знаю, используете ли вы его.

Вот пример с localStorage 

export default function BackgroundCard(props) {
  var body = document.getElementById("body");

  function setBackground() {
    localStorage.setItem('bg', props.image);  // Set into local storage
    body.style.backgroundImage = `url(${props.image})`;
  }

  return (
    <Card style={{ maxWidth: 275, marginTop: 10 }}>
      <CardActionArea>
        <CardMedia
          height="300"
          component="img"
          image={props.image}
          title={props.title2}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {props.title}
          </Typography>
          <div style={{ display: "flex", alignItems: "center" }}>
            <Button
              id="bgImg"
              variant="contained"
              style={{ marginTop: 10 }}
              onClick={setBackground}
            >
              Select
            </Button>
          </div>
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

И чем где-то в вашем App.jsx вы можете добавить 

useEffect(() => {
   const img = localStorage.getItem('bg');
   if (img) {
      body.style.backgroundImage = `url(${img})`;
   }
}, []);

Не знаете как Ваш App.jsx выглядит

Вы можете добавить это даже в свой индекс. js или любой верхний код

...