Извлеките изображение из PouchDB и добавьте его в стили пользовательского интерфейса в качестве фонового изображения. - PullRequest
Новая
       7

Извлеките изображение из PouchDB и добавьте его в стили пользовательского интерфейса в качестве фонового изображения.

0 голосов
/ 26 октября 2018

Поэтому я сохраняю фоновое изображение для определенного экрана в pouchdb и хочу вытащить изображение и добавить его в качестве свойства backgroundImage в мой основной тег div.Мне удалось решить эту проблему следующим образом: 

class LiveScreen extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { minutes: 60, seconds:0,
                    clue1Used: false, clue2Used: false, clue3Used: false,
                    clue: '',
                    playVideo: false};

    this.db = new PouchDB('kittens');
    this.db.getAttachment('background', 'background.png').then(function(blob) {
      var url = URL.createObjectURL(blob);
var backgroundDiv = document.getElementById('backgroundDiv');
      backgroundDiv.style.backgroundImage= 'url('+ url +') ';
      backgroundDiv.style.height='100vh';
      backgroundDiv.style.backgroundRepeat = 'no-repeat';
      backgroundDiv.style.backgroundPosition = 'center';
      backgroundDiv.style.backgroundSize = 'cover';

Но это очень уродливо, и я хотел бы интегрировать его в свои стили со всем остальным.Проблема в том, что стили статичны, и я, кажется, не могу вытащить изображение из моего pouchDB перед тем, как оно будет готово к работе до того, как оно понадобится стилю. Даже если я добавлю все остальные элементы стиля backgroundDiv в таблицу стилей и добавлю только изображениетаким образом, после этого ничего не реализовано в стилях.Это моя текущая реализация, пытающаяся заставить его работать вне класса для добавления стилей напрямую: 

const db = new PouchDB('kittens');

const url = URL.createObjectURL(db.getAttachment('background', 'background.png').then(function(blob) {
  return URL.createObjectURL(blob);
}));

const styles = theme => ({
  background: {
      backgroundImage: 'url('+ url +')',
      height: '100vh',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundSize: 'cover'
  },
});

//later in code
<div id='backgroundDiv' className={classNames(classes.background)}>

Обертка 'url (' + url + ')' была экспериментом, с которым я пыталсяи без этого, потому что в этот момент я не уверен, если это нужно или нет.Может кто-нибудь помочь мне понять, как вытащить эту вещь из БД и передать ее стилям, чтобы мой div мог ее использовать?Я не получаю никаких ошибок от него, просто нет изображения, показывающего.и я знаю, что извлечение изображения сработало, потому что я могу добавить 

//var img = document.createElement('img');
      //img.src = url;
      //document.body.appendChild(img);
      //var backgroundDiv = document.getElementById('backgroundDiv');

в вызове then (), и это будет добавлено правильно

...