如何使用 Javascript 从数据库中显示网站上的图像？

Question

我一直在尝试制作一个在表格中显示图像、名称、品牌等的可视化数据库网站。我已经设法让它大部分工作，但在试图找出如何显示图像时遇到了困难。出于某种原因，唯一有效的图像是第一行，但之后的所有内容都没有显示图像。我当前的代码是：

    function retrieveItems(){

    var Tablerow = document.getElementById("table");
    Tablerow.class = "w3-ul w3-card-4";
    Tablerow.style = "background-color: #202020";

    var row = document.getElementById("row");
    row.style = "height: 220px";

    var tableData = document.getElementById("tableData");
    tableData.class = "w3-large w3-left";

    var actionButton = document.getElementById("editButton");
    actionButton.innerHTML = "Edit";

    var table = document.getElementById("row");
    var clone = table.cloneNode(true);

for (var i = 0; i < itemArray.length; ++i){

    document.getElementById("itemname").innerHTML = "Item: " + item.name,
    document.getElementById("itembrand").innerHTML = "Brand: " + item.brand,
    document.getElementById("itemcategory").innerHTML = "Category: " + item.category

}

    storage.ref(item.category + '/' + item.number + '.jpg').getDownloadURL().then(function(url) {
        document.getElementById("itemImage").src = url;
    });

table.parentNode.appendChild(clone);
    }


    function createTable() {
        var Tableclassrow = document.getElementById("classrow");
        Tableclassrow.class = "row";
        Tableclassrow.style = "background-color: #202020";
    }

    function createRow() {


    }

我对 JavaScript 很陌生，所以可能有十亿个错误，但我只需要能够看到图像。我没有包含更多代码，因为我认为不需要它，但是如果您想查看它，我可以发布它。

编辑：HTML 部分

            <div class="gtco-tab-content-wrap">
              <div class="col-md-8 col-md-offset-2 text-center">
                    <div class="row">
                        <p align=left>
                           <label>Select Category *</label>
                            <select class="form-control" id="category"                                 onblur="getSubcategoryArray()">
                                <option></option>
                            </select>
                        </p><p align=left>
                            <label>Select Subcategory</label>
                            <select class="form-control" id="subcategory">
                                <option></option>
                            </select>
                        </p><p align=left>
                            <label>Item Number/Reference</label>
                            <input class="form-control" id="itemnumberlookup">

                        <div class="col-md-4 col-md-offset-4 text-center"><br>
                        <br><button class="btn-lg btn-primary btn" onclick="searchDatabase()"><font size="5">Search</font></button>
                        </div>
                    </div><br><br>
                </div>
            </div>

            <div id="tableclass" class="gtco-tab-content-wrap">
             <div id="tableclass2" class= "col-md-8 col-md-offset-2 text-center">
                    <div id="classrow"><br>
                    <font size="5" id="databaselabel"></font><br>
                    <hr id="divider" style="height:px;border:none;color:none;background-color:none;"/><br>
                        <ul id="table">
                            <li class="w3-bar" id="row">
                            <img class="w3-bar-item" style="width:315px" id="itemImage">

                            <span onclick="" class="w3-bar-item w3-button w3-right" 
                            id="editButton"><font size="4"></font></span>
                            <div id="tableData" class= "w3-large w3-left">
                                    <p align="left">
                        <span id="itemname"></span><br>
                        <span id="itembrand"></span><br>
                        <span id="itemnumber"></span><br>
                        <span id="itemcategory"></span><br>
                        <span id="itemdiscount"></span><br>
                        <span id="itemexpiration"></span><br>
                        <span id="itemterms"></span><br>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
   </div>

Answer 1

尝试<canvas>，如果可以选择 HTML 5 - 请参阅MDN Canvas

Answer 2

您设置的唯一src 是document.getElementById("itemImage").src = url，因此只有您的DOM 的第一个元素<img id="itemImage"> 会获得一个src 并会加载并显示图像。

首先要知道id 在你的DOM 中必须是唯一的。否则document.getElementById("yourId") 将始终返回相同的节点。制作表格时，您必须用唯一的 id 标识每一行，如item-1、item-2、item-3 等...，然后表格的每个单元格都会有一个类名，如 @987654329 @、itemBrand 等...

然后，您可以使用document.getElementById('item-25).getElementsByClassName('itemImage')[0] 访问第 n°25 项的图像

所以假设你的代码，解决方案应该是这样的：

var table = document.getElementById("row");

itemArray.forEach(function(item) {
    var clone = table.cloneNode(true);
    clone.id = "item-" + item.number
    clone.getElementsByClassName('itemname')[0].innerHTML = "Item: " + item.name,
    clone.getElementsByClassName('itembrand')[0].innerHTML = "Brand: " + item.brand,
    clone.getElementsByClassName('itemcategory')[0].innerHTML = "Category: " + item.category
    storage.ref(item.category + '/' + item.number + '.jpg').getDownloadURL().then(function(url) {
        clone.getElementsByClassName('itemImage')[0].src = url;
    });
    table.parentNode.appendChild(clone);
})