如何用原生JavaScript在HTML页面展示Firebase Storage手动上传的图片并获取URL

你的代码仅列出了Storage中的文件引用，未获取可访问的下载URL，也未将图片添加到页面中。以下是完整实现方案：

完整代码示例 #

HTML结构 #

先在页面中准备一个容器用于展示图片：

<div id="image-container"></div>

JavaScript代码 #

修改原有逻辑，通过getDownloadURL获取图片的可访问链接，再创建<img>元素插入页面：

import { getStorage, ref, listAll, getDownloadURL } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-storage.js";

// 初始化Storage（若未配置Firebase项目，需先添加firebase-app初始化代码）
const storage = getStorage();

// 根目录引用，若图片在子目录可修改路径，例如'photos/'
const listRef = ref(storage, '');

// 列出目录下所有文件
listAll(listRef)
.then((res) => {
  const imageContainer = document.getElementById('image-container');
  
  res.items.forEach((itemRef) => {
    // 获取单个文件的下载URL
    getDownloadURL(itemRef)
    .then((url) => {
      // 创建img元素并设置属性
      const img = document.createElement('img');
      img.src = url;
      img.alt = itemRef.name; // 用文件名作为替代文本
      img.style.maxWidth = '300px'; // 可选：设置图片最大宽度
      // 将图片添加到页面容器
      imageContainer.appendChild(img);
    })
    .catch((error) => {
      console.error('获取图片URL失败:', error);
    });
  });
})
.catch((error) => {
  console.error('列出文件失败:', error);
});

关键注意事项 #

• Storage权限配置：确保你的Firebase Storage规则允许读取操作（测试环境可临时开放，生产环境需配置严格权限），示例规则：

  rules_version = '2';
  service firebase.storage {
    match /b/{bucket}/o {
      match /{allPaths=**} {
        allow read: if true;
        allow write: if request.auth != null;
      }
    }
  }
  

• Firebase项目初始化：若未初始化Firebase，需先添加初始化代码：

  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
  
  const firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的MESSAGING_SENDER_ID",
    appId: "你的APP_ID"
  };
  
  const app = initializeApp(firebaseConfig);
  

内容的提问来源于stack exchange，提问作者Arun c Shaji