如何显示从调用 API 到 HTML 的图片？

Question

Issue is that the image is not showing up in my HTML. How to resolve this issue? Please refer below.

This is my codes for the website i use to show the image up

<div class="col-md-7">

                                <div class="table-responsive">
                                    <table id="customer-list" class="table">
                                        <!-- Loading Spinner Div -->
                                        <div id="loading-container">
                                            <p>Fetching all recyclable data...</p>
                                            <div id="loading-spinner">
                                                
                                            </div>
                                        </div>
                                        <tbody>
                                            <img id="myimage" />
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!--AJAX call database-->
                    <script>
                        

                    
                        $.ajax({

                            url: "https://ecoexchange.dscloud.me:8080/api/get",

                            method: "GET",
                            // In this case, we are going to use headers as
                            headers: {
                                // The query you're planning to call
                                // i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
                                query: "CustomerGet(0)",

                                // Gets the apikey from the sessionStorage
                                apikey: sessionStorage.getItem("apikey")
                            },



                            success: function (data, xhr, textStatus) {
                                console.log(data)
                            
                                
                                const buildTable = data => {
                                        const table = document.querySelector("#customer-list tbody");
                                        

                                        for (let i = 0; i < data.length; i++) {
                                            let row = 
                                            
                                            `
                                                    
                                                    <tr>
                                                    <td class="cell-recyclable-name"><img src = ${data[i].Picture}/></td>
                                                    <td class="cell-recyclable-name">${data[i].Name}</td>
                                                    </tr>`;
                                            
                                            table.insertAdjacentHTML('beforeEnd', row);
                                            //document.getElementById("myimage").src = `${data[i].Picture}`;
                                        }
                                    };

                                    // Fetch method
                                    const getData = async (url) => {

                                        const response = await fetch(url, {
                                            method: 'GET',
                                            headers: {
                                                query: "CustomerGet(0)",
                                                // Gets the apikey from the sessionStorage
                                                apikey: sessionStorage.getItem("apikey")
                                            }
                                        });
                                        const json = await response.json();
                                        $("#loading-container").hide();
                                        return buildTable(json);
                                    };
                                    getData('https://ecoexchange.dscloud.me:8080/api/get')
    
                        

                            },

                            error: function (xhr, textStatus, err) {
                                console.log(err);
                            }
                            });
                    </script>
                    </div>

i have no idea why image is not showing up instead is showing broken image link for now

Needed help for this issue as to why the image is not showing up

Answer 1

NVM figure out reason why

<td class="cell-recyclable-name"><img src = "${data[i].Picture}"></img></td>