Возникла проблема с функцией Javascript для получения ссылки на изображение в сети Firestore

Question

Я пытаюсь получить сообщение из Firestore, которое будет отображаться на карточке, в которую будут входить изображение карты и содержимое карты. Приведенный ниже код смог создать карту с содержимым карты, но image не отображается, отображается только значок, но не данные изображения. В консоли нет ошибок. title и summary получены и показаны на Карте.

Я думаю, что то, что я сделал, не является правильным способом получения изображения из Firestore

//Create Post
function createPost(image, title, summary) {
  let div = document.createElement('div');
  div.setAttribute('class', 'col-md-4 mb-4');

  let divCard = document.createElement('div');
  divCard.setAttribute('class', 'card');

  let divCardImg = document.createElement('div');
  divCardImg.setAttribute('class', 'view');

  let img = document.createElement('img');
  img.setAttribute('class', 'card-img-top');

  let divContent = document.createElement('div');
  divContent.setAttribute('class', 'card-body');

  let h4 = document.createElement('h4');
  h4.setAttribute('class', 'card-title');

  let p = document.createElement('p');
  p.setAttribute('class', 'card-text');

  img.src = image;
  h4.textContent = title;
  p.textContent = summary;

  divContent.appendChild(h4);
  divContent.appendChild(p);
  divCard.appendChild(divContent);
  divCardImg.appendChild(img);
  divCard.appendChild(divCardImg);
  div.appendChild(divCard);

  fashionCollection.appendChild(div);
}

// Get Posts
function getPosts() {
  db.collection("post")
    .get()
    .then(snapshot => {
      snapshot.docs.forEach(docs => {
        createPost(
          docs.data().image,
          docs.data().title,
          docs.data().summary
        );
      });
    })
    .catch(err => {
      console.log(err);
    });
}

getPosts();

Функция createPost создает сообщение на карте с определенными атрибутами, а функция getPost извлекает данные.

Пожалуйста, позвольте мне кое-что исправить это.

Answer 1

Ответ зависит от того, как вы храните свое изображение в Firestore. Если это URL, то проблема может быть в разрешениях хранилища. Если он закодирован в base64 и хранится в типе байтов , то вам нужно указать это в атрибуте sr c следующим образом:

img.src = "data:image/png;base64," + image;

Имейте в виду, что хранение изображений в Поле типа байтов не подходит, так как оно ограничено 1 МБ, предпочтительным способом является размещение образов в облачном хранилище.