Firebase 存储上未捕获类型错误

Question

因此，我尝试使用图像的文件名（用户的 ID）从 firebase 存储中获取图像并显示它。结果是这样的： 未捕获的类型错误：无法解析模块说明符“firebase/storage”。相对引用必须以“/”、“./”或“../”开头。 我尝试过这样做，但它只是显示 404。

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-database.js";//
import { getStorage, ref as storageRef, getDownloadURL } from "firebase/storage";

const appSettings = {
    databaseURL: "https://mobilelibattendance-default-rtdb.asia-southeast1.firebasedatabase.app/"
}
const app = initializeApp(appSettings);
const database = getDatabase(app);
const attendanceDB = ref(database, "users");
const storage = getStorage(app);//

const userIMG = document.getElementById("profile");
const IDNum = document.getElementById("IDNum");
const fullName = document.getElementById("fullName");
const fullBirthday = document.getElementById("fullBirthday");
const sex = document.getElementById("sex");
const street = document.getElementById("street");
const exp = document.getElementById("exp");
const cityProvince = document.getElementById("cityProvince");

 onValue(attendanceDB, function(snapshot) {
    let scannedID="CNPL0987654321"; // placeholders
    //CNPL0987654321  CNPL1234567890
    if (snapshot.exists()){
        let usersArray = Object.entries(snapshot.val());
        for (let i = 0;i<usersArray.length;i++) {
        let allUsers = usersArray[i]; //fetch users
        let userID = allUsers[0]; //fetch id
        let userInfo = allUsers[1]; //fetch info
        if (userID == scannedID){
            listUserInfo(scannedID, userInfo); //pass data
        }
    }
    }else {
        fullName.innerHTML="No user...";
    }

})

async function listUserInfo(userID, userInfo) { //receive data
    console.log(userInfo);
    let fullname = userInfo.firstname + " " + userInfo.lastname;
    let birthdate = userInfo.birthmonth + " " + userInfo.birthday + ", " + userInfo.birthyear;
    const filename = userID + ".jpg";
    const filePath = `users/${filename}`
    const imageRef = ref(storage, filePath);

    let userIMGLink = imageRef;
    try {
        const url = await getDownloadURL(imageRef);
        changeUserImage(url);
       }catch (error) {
        console.error("Error getting download URL:", error);
       }

    changeUserImage(userIMGLink);
    IDNum.innerHTML=userID;
    fullName.innerHTML=fullname;
    fullBirthday.innerHTML=birthdate;
    sex.innerHTML=userInfo.sex;
    street.innerHTML =userInfo.street;
    exp.innerHTML =userInfo.exp;
    cityProvince.innerHTML =userInfo.cityProvince;
}

我正在使用数据库存储中的 url 来更改元素 userIMG 的 src

function changeUserImage(userIMGLink) {
    let newIMG = userIMGLink;
    userIMG.src = newIMG;
    console.log(newIMG);
}

Answer 1

您不能真正混合使用两种不同的导入样式：

import { getDatabase, ref, onValue }
    from "https://www.gstatic.com/firebasejs/10.11.1/firebase-database.js";
import { getStorage, ref as storageRef, getDownloadURL }
   from "firebase/storage";

您使用的第一个直接 HTTP 访问是用于不使用模块捆绑器的独立网页。第二个适用于使用捆绑器的 Web 应用程序。显然您没有使用捆绑器，因此您应该坚持直接 HTTP 导入，如文档中所述：

您使用ESM并想使用浏览器模块吗？替换所有导入行以使用以下模式：

import { } from 'https://www.gstatic.com/firebasejs/10.11.1/firebase-SERVICE.js'

（其中 SERVICE 是 SDK 名称，例如

firebase-firestore

）。

使用浏览器模块是一种快速入门方法，但我们建议使用模块捆绑器进行生产。

因此，如果您想使用 firebase-storage 模块，您应该使用与您为其他 Firebase 模块请求的版本相匹配的 http 导入：

https://www.gstatic.com/firebasejs/10.11.1/firebase-storage.js