因此,我尝试使用图像的文件名(用户的 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);
}
您不能真正混合使用两种不同的导入样式:
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并想使用浏览器模块吗?替换所有导入行以使用以下模式:
(其中 SERVICE 是 SDK 名称,例如import { } from 'https://www.gstatic.com/firebasejs/10.11.1/firebase-SERVICE.js'
)。firebase-firestore
使用浏览器模块是一种快速入门方法,但我们建议使用模块捆绑器进行生产。
因此,如果您想使用 firebase-storage 模块,您应该使用与您为其他 Firebase 模块请求的版本相匹配的 http 导入:
https://www.gstatic.com/firebasejs/10.11.1/firebase-storage.js