如何使用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

如果可以选择HTML 5，请尝试<canvas> -请参阅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等，然后表格的每个单元格将具有一个类名，例如itemImage ， 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);
})