如何使用JavaScript显示Firebase实时数据库中图片URL对应的图片？

数据老陈

2026-8-12

问题：将Firebase实时数据库中的图片URL转换为显示图片本身是否可行？

我目前已能从Firebase实时数据库中获取并显示图片URL，但需要将其转换为显示图片本身，请问是否可行？

由于我对JavaScript和Firebase并不熟悉，尚未尝试编写相关代码，以下是我用于从Firebase实时数据库检索捐赠数据并在模态框中展示的现有代码：

HTML代码

<div class="modal-body">
    <label class="labs">Donation ID: </label>
    <input type="text" id="DonationId" readonly="readonly"> <br>

    <label class="labs">User ID: </label>
    <input type="text" id="UserId" readonly="readonly"> <br>

    <label class="labs">Name: </label>
    <input type="text" id="FName" readonly="readonly"> <br>

    <label class="labs">Organization: </label>
    <input type="text" id="Org" readonly="readonly"> <br>

    <label class="labs">Contact Person: </label>
    <input type="text" id="ContPer" readonly="readonly"> <br>

    <label class="labs">Contact Number: </label>
    <input type="text" id="ContNum" readonly="readonly"> <br>

    <label class="labs">Type: </label>
    <input type="text" id="Type" readonly="readonly"> <br>

    <label class="labs">Date: </label>
    <input type="text" id="Date" readonly="readonly"> <br>

    <label class="labs">Time: </label>
    <input type="text" id="Time" readonly="readonly"> <br>

     <label class="labs">Purchase Date: </label>
    <input type="text" id="PDate" readonly="readonly"> <br>

    <label class="labs">Expiration Date: </label>
    <input type="text" id="EDate" readonly="readonly"> <br>

    <label class="labs">Weight: </label>
    <input type="text" id="Weight" readonly="readonly"> <br>

    <label class="labs">Note: </label>
    <textarea id="Note" readonly="readonly"></textarea> <br>

    <label class="labs">Attached Image: </label>
    <input type="text" id="Img" readonly="readonly"> <br>

    <label class="labs">Status: </label>
    <input type="text" id="Stat" readonly="readonly">
</div>

JavaScript代码

function AddItemToTable(id,uid,name,org,contPer,contNo,type,date,time,pdate,edate,weight,note,image,status){
    let trow = document.createElement("tr");
    let td1 = document.createElement('td');
    let td2 = document.createElement('td');
    let td3 = document.createElement('td');
    let td4 = document.createElement('td');
    let td5 = document.createElement('td');
    let td6 = document.createElement('td');
    let td7 = document.createElement('td');
    let td8 = document.createElement('td');
    let td9 = document.createElement('td');
    let td10 = document.createElement('td');
    let td11 = document.createElement('td');
    let td12 = document.createElement('td');
    let td13 = document.createElement('td');
    let td14 = document.createElement('td');
    let td15 = document.createElement('td');
    let td16 = document.createElement('td');

    newDonationList.push([id,uid,name,org,contPer,contNo,type,date,time,pdate,edate,weight,note,image,status]);
    td1.innerHTML = ++num;
    td2.innerHTML = id;
    td3.innerHTML = uid;
    td4.innerHTML = name;
    td5.innerHTML = org;
    td6.innerHTML = contPer;
    td7.innerHTML = contNo;
    td8.innerHTML = type;
    td9.innerHTML = date;
    td10.innerHTML = time;
    td11.innerHTML = pdate;
    td12.innerHTML = edate;
    td13.innerHTML = weight;
    td14.innerHTML = note;
    td15.innerHTML = image;
    td16.innerHTML = status;

    td15.classList += "statusField";
    td4.classList += "nameField";
    td5.classList += "organizationField";
    td8.classList += "typeField";

    trow.appendChild(td1);
    trow.appendChild(td2);
    trow.appendChild(td3);
    trow.appendChild(td4);
    trow.appendChild(td5);
    trow.appendChild(td6);
    trow.appendChild(td7);
    trow.appendChild(td8);
    trow.appendChild(td9);
    trow.appendChild(td10);
    trow.appendChild(td11);
    trow.appendChild(td12);
    trow.appendChild(td13);
    trow.appendChild(td14);
    trow.appendChild(td15);
    trow.appendChild(td16);

    var ControlDiv = document.createElement("td");
    ControlDiv.innerHTML = '<button type="button" class="manage-btn" data-toggle="modal" data-target="#ModalCenter" onclick="FillModal('+num+')">VIEW</button>'

    trow.appendChild(ControlDiv);
    tbody.appendChild(trow);

}

function AddAllITemsToTable(Donation) {
    num=0;
    tbody.innerHTML="";
    Donation.forEach(element => {
        AddItemToTable(element.id, element.uid, element.fullName, element.organization, element.contactPerson, element.contactNo, element.type, element.dateAdded, element.dateAddedTime, element.datePurchased, element.dateExpired, element.weight, element.notes, element.imageUrl, element.donationStatus);
    });
}

function GetAllDataRealtime() {
   const dbRef = ref(database, 'Users');

    onValue(dbRef,(snapshot) => {
        var Donations = [];

        snapshot.forEach(userSnapshot => {
            userSnapshot.child("donation").forEach((donationSnapshot) => {
                Donations.push(donationSnapshot.val());
            });
        });

        AddAllITemsToTable(Donations);
    })

}

window.onload = GetAllDataRealtime;

var ModDid = document.getElementById('DonationId');
var ModUid = document.getElementById('UserId');
var ModName = document.getElementById('FName');
var ModOrg = document.getElementById('Org');
var ModContPer = document.getElementById('ContPer');
var ModContNo = document.getElementById('ContNum');
var ModType = document.getElementById('Type');
var ModDate = document.getElementById('Date');
var ModTime = document.getElementById('Time');
var ModPDate = document.getElementById('PDate');
var ModEDate = document.getElementById('EDate');
var ModWeight = document.getElementById('Weight');
var ModNote = document.getElementById('Note');
var ModImage = document.getElementById('Img');
var ModStatus = document.getElementById('Stat');

window.FillModal=(index) => {
    if(index==null){
        ModDid.value = "";
        ModUid.value = "";
        ModName.value = "";
        ModOrg.value = "";
        ModContPer.value = "";
        ModContNo.value = "";
        ModType.value = "";
        ModDate.value = "";
        ModTime.value = "";
        ModPDate.value = "";
        ModEDate.value = "";
        ModWeight.value = "";
        ModNote.value = "";
        ModImage.value = "";
        ModStatus.value = "";
    }
    else{
        --index;
        ModDid.value = newDonationList[index][0];
        ModUid.value = newDonationList[index][1];
        ModName.value = newDonationList[index][2];
        ModOrg.value = newDonationList[index][3];
        ModContPer.value = newDonationList[index][4];
        ModContNo.value = newDonationList[index][5];
        ModType.value = newDonationList[index][6];
        ModDate.value = newDonationList[index][7];
        ModTime.value = newDonationList[index][8];
        ModPDate.value = newDonationList[index][9];
        ModEDate.value = newDonationList[index][10];
        ModWeight.value = newDonationList[index][11];
        ModNote.value = newDonationList[index][12];
        ModImage.value = newDonationList[index][13];
        ModStatus.value = newDonationList[index][14];
        
    }
}

解决方案

完全可行，只需修改两处代码即可实现：

1. 替换HTML中的图片展示控件

把原来显示URL的<input>元素替换为<img>标签，可添加基础样式保证显示效果：

<label class="labs">Attached Image: </label>
<!-- 替换原input为img标签 -->
<img id="ImgDisplay" src="" alt="捐赠图片" style="max-width: 300px; max-height: 300px; object-fit: contain;" />
<br>

2. 修改JavaScript的模态框填充逻辑

首先更新元素获取代码，删除原输入框变量，新增图片元素变量：

// 删除原输入框变量
// var ModImage = document.getElementById('Img');
// 新增图片元素变量
var ModImgDisplay = document.getElementById('ImgDisplay');

然后修改FillModal函数中处理图片的部分，将URL赋值给图片的src属性：

window.FillModal=(index) => {
    if(index==null){
        // 保留其他清空逻辑不变
        ModImgDisplay.src = "";
        ModImgDisplay.alt = "捐赠图片";
    }
    else{
        --index;
        // 保留其他赋值逻辑不变
        const imageUrl = newDonationList[index][13];
        ModImgDisplay.src = imageUrl || "";
        ModImgDisplay.alt = imageUrl ? "捐赠图片" : "无图片";
    }
}

可选：表格中也显示图片而非URL

如果需要在列表表格中也展示图片缩略图，修改AddItemToTable函数中td15的内容：

// 替换原td15.innerHTML = image;
if(image) {
    td15.innerHTML = `<img src="${image}" alt="缩略图" style="width: 80px; height: 80px; object-fit: cover;" />`;
} else {
    td15.textContent = "无图片";
}

完成以上修改后，模态框和表格中将直接展示图片，而非原始URL。

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

如何使用JavaScript显示Firebase实时数据库中图片URL对应的图片？

HTML代码 #

JavaScript代码 #

1. 替换HTML中的图片展示控件 #

2. 修改JavaScript的模态框填充逻辑 #

可选：表格中也显示图片而非URL #

HTML代码

JavaScript代码

1. 替换HTML中的图片展示控件

2. 修改JavaScript的模态框填充逻辑

可选：表格中也显示图片而非URL