So I was trying to get an image from firebase storage using its file name, which is an ID of a user and display it. Here’s what came up:
Uncaught TypeError: Failed to resolve module specifier “firebase/storage”. Relative references must start with either “/”, “./”, or “../”.
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;
}
I am using the url in my database storage to change the src of the element userIMG
function changeUserImage(userIMGLink) {
let newIMG = userIMGLink;
userIMG.src = newIMG;
console.log(newIMG);
}
New contributor
Jasper Dizon is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.