迭代影像不起作用，javascript

我有這段代碼，它可以為我提供控制臺中影像的 url。

但它不會在我的網站上列印出影像

for (let i=0; i < data.length; i  ){
        let url = data[i].token_uri
        fetch(url)
        .then(response => response.json())
        .then(data => console.log(data['image']));

          
           
        let row = `<tr>
                    <td>${data[i].token_id}</td>
                    <td>${data[i].contract_type}</td>
                    <td><h4>${data[i].token_address}</h4></td>
                    <td><img src=${data['image']}></td>
                    
                </tr>`
                
    table.innerHTML  = row

}

我也試過 let images = data['image']

而不是在我的行中使用 images 變數

這是完整的代碼，也許這有助于有人給我一個正確的答案

async function populate(){
    const nft = await



Moralis.Web3API.account.getNFTs({chain: 'matic'}).then(buildTableNFT);
    

}

function buildTableNFT(_data){
    let data = _data.result;
    document.getElementById("resultNFT").innerHTML = `<table class="table table-dark table-striped" id="nftTable">
                                                            </table>`;
    const table = document.getElementById("nftTable");
    const rowHeader = `<thead>
                            <tr>
                                <th>ID</th>
                                <th>Type</th>
                                <th>Contract</th>
                                <th>Image</th>
                            </tr>
                        </thead>`
    table.innerHTML  = rowHeader;
    for (let i=0; i < data.length; i  ){
        let url = data[i].token_uri
        fetch(url)
        .then(response => response.json())
        .then(data => console.log(data['image']));
        let images = data['image']
          
           
        let row = `<tr>
                        <td>${data[i].token_id}</td>
                        <td>${data[i].contract_type}</td>
                        <td><h4>${data[i].token_address}</h4></td>
                        <td><img src="${images}"></td>
                        
                    </tr>`
                    
        table.innerHTML  = row
    
}

}

uj5u.com熱心網友回復：

您可以并行獲取所有資料，然后構建 html。它會快得多。

function buildTableNFT(_data){
    let data = _data.result;

    const promises = data.map(({ token_uri }) => fetch(token_uri).then(res => res.json()));

    Promise.all(promises).then(images => {
        document.getElementById("resultNFT").innerHTML = `<table class="table table-dark table-striped" id="nftTable">
                                                            </table>`;
        const table = document.getElementById("nftTable");
        const rowHeader = `<thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Type</th>
                                    <th>Contract</th>
                                    <th>Image</th>
                                </tr>
                            </thead>`
        table.innerHTML  = rowHeader;
        for (let i=0; i < data.length; i  ){            
            let row = `<tr>
                            <td>${data[i].token_id}</td>
                            <td>${data[i].contract_type}</td>
                            <td><h4>${data[i].token_address}</h4></td>
                            <td><img src="${images[i]['image']}"></td>
                            
                        </tr>`
                        
            table.innerHTML  = row
        }
    });
    
}

uj5u.com熱心網友回復：

以下是您在代碼中使用 async/await 的方法

async function populate(){
    const nft = await Moralis.Web3API.account.getNFTs({chain: 'matic'});
    return buildTableNFT(nft);
}

async function buildTableNFT({result}) {
    document.getElementById("resultNFT").innerHTML = `
        <table class="table table-dark table-striped" id="nftTable">
        </table>
    `;
    const table = document.getElementById("nftTable");
    const rowHeader = `
        <thead>
            <tr>
                <th>ID</th>
                <th>Type</th>
                <th>Contract</th>
                <th>Image</th>
            </tr>
        </thead>
    `;
    table.innerHTML  = rowHeader;
    for (let i = 0; i < result.length; i  ) {
        let url = result[i].token_uri;
        const response = await fetch(url);
        const data = await response.json();
        const image = data.image;
        const row = `
            <tr>
                <td>${result[i].token_id}</td>
                <td>${result[i].contract_type}</td>
                <td><h4>${result[i].token_address}</h4></td>
                <td><img src="${image}"></td>
            </tr>
        `;
        table.innerHTML  = row;
    }
}

uj5u.com熱心網友回復：

令人擔憂的是，您的 ${data['image']} 無法在 .then() 承諾的背景關系之外訪問。

for (let i=0; i < data.length; i  ){
        let url = data[i].token_uri
        
        fetch(url)
        .then(response => response.json())
        .then(item=> {
        
          let row = `<tr>
                    <td>${data[i].token_id}</td>
                    <td>${data[i].contract_type}</td>
                    <td><h4>${data[i].token_address}</h4></td>
                    <td><img src=${item['image']}></td>
                    
                </tr>`
                table.innerHTML  = row
        });
}

標籤：javascript html 图片

上一篇：運行影像轉換腳本給我“沒有這樣的檔案”

下一篇：使用DevExpress.Utils或其他在vb.net中結合路徑的解決方案使用devexpressgridview顯示圖片編輯