使用Firebase Storage与JavaScript在首页展示图片时报Error 1如何处理

问题修复方案 #

你触发Error 1的核心原因是代码存在语法错误，同时还有逻辑、权限相关的潜在问题，逐一修复如下： #

1. 修复语法错误

你的代码末尾多了一个冗余的闭合大括号}，会直接导致全局脚本执行异常，触发listAll的catch分支输出Error 1，删掉多余的大括号即可。

2. 移除冗余代码

代码中test = imageRef.getDownloadURL();属于无效冗余代码，且未声明test变量会引发作用域污染，直接删除该行即可。

3. 修复多图展示逻辑

你循环所有图片引用时，每次都给同一个id=tierFoto的图片元素赋值src，最终只会展示最后一张图片，建议动态创建图片元素插入页面。

4. 确认安全规则配置

先检查Firebase Storage的安全规则，确保你当前的访问权限允许读取对应路径的资源，默认规则会禁止未认证用户的读写请求，测试阶段可临时使用如下规则：

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

5. 修复后完整代码

// 确保listRef是正确初始化的Storage路径引用
listAll(listRef).then((res) => {
    res.items.forEach(function (imageRef) {
        console.log(imageRef);
        displayImage(imageRef);
    });
}).catch((error) => {
    // 打印完整错误信息方便定位问题
    console.log("Error 1", error);
});

function displayImage(imageRef) {
    imageRef.getDownloadURL().then(function (url) {
        // 动态创建img元素
        const img = document.createElement('img');
        img.src = url;
        // 替换为你页面上承接图片列表的父容器ID
        const imageContainer = document.getElementById('image-container');
        imageContainer.appendChild(img);
    }).catch(function (error) {
        console.log("Error 2", error);
    });
}

内容的提问来源于stack exchange，提问作者Thomas Kupfer