如何在网站中显示来自 Firestore 下载 URL 的图像答案

【问题标题】：How to show image from Firestore Download URL in website如何在网站中显示来自 Firestore 下载 URL 的图像
【发布时间】：2020-01-23 23:43:09
【问题描述】：

以前从未做过 JavaScript（以后会学习），但需要构建它以使我的数据更容易上传到我的 Android 应用的 Firebase Firestore。我做了两个教程并使用该代码来构建它。一部分将图像上传到 Firebase 存储，然后获取 URL 并将其与其余数据一起加载到 Firebase Firestore。

它正在 100% 工作，但想知道如何使图像显示（更改 HTML 或 Javascript）而不是下载 URL。

这就是我现在获得输出的方式，我希望在此处显示图像：

现在我应该在哪里放置显示实际图像的内容，而不是图片中的 URL。是否有一些像 Picasso 或 Glide 之类的网页的东西，我必须用它来将 URL 转换为图像。

我相信我应该在这里更改一些内容或添加一些内容来显示图像而不是 URL：

这里：

  //create element and render cafe
  function renderProduct(doc){
let li = document.createElement('li');
let promo_number = document.createElement('span');
let image  = document.createElement('span');
let cross = document.createElement('div');

或者这里

li.setAttribute('data-id', doc.id);
promo_number.textContent = doc.data().promo_number;
image.textContent = doc.data().image;
cross.textContent = 'x';

或者这里

li.appendChild(promo_number);
li.appendChild(image);
li.appendChild(cross);

promo_product_list.appendChild(li);

但我不知道该放什么。

即在Javascript类中，请看这些Pastebins中的JavaScript和HTML：

HTML here

JavaScript Here

我知道代码很糟糕，但它可以满足我的需要，但如果我能看到实际的图像，它会更好。感谢观看

【问题讨论】：

标签： javascript html image url google-cloud-firestore

【解决方案1】：

为此，您可以简单地使用JavaScript DOM API 动态创建一个<img /> HTML 元素，同时指定 URL、宽度、高度等。

例如，您可以创建一个可重用的函数来显示如下图像：

const displayImg = (url, width, height, id, className) => {
  const img = document.createElement('img');

  img.src = url;
  img.width = width;
  img.height = height;
  img.id = id;
  img.className = className;

  document.body.appendChild(img);
}

调用上面的函数将根据提供的参数创建一个图像，并将其附加到<body> 标记中。

【讨论】：