HTML img src沒有動態更新

在我的desktop app的一部分中，我已經寫了一個函數，根據json文件的輸出更改/重寫html div文本和一個圖像源（可以更改），但是img src不會隨着它而改變。HTML img src沒有動態更新

該應用的外觀like。當文字（新聞標題）改變時，'logo'圖像應該改變。

這裏是function部分：

function newsAPI(){ 
    for(i = 0; i<config['newsapi']['sources'].length;i++) { 
    document.getElementById('news_icon').src="img/news/" + config['newsapi']['sources'][i] + ".png"; 
    request({ 
     url: 'https://newsapi.org/v1/articles?source=' + config['newsapi']['sources'][i] + '&sortBy=top&apiKey=' + config['newsapi']['api_key'], 
     method: 'get' 
    }, function (err, res, body){ 
     var parsedbody = JSON.parse(body) 
     parsedbody = parsedbody['articles']; 
     document.getElementById('news_1').innerHTML = parsedbody[0]['title']; 
     document.getElementById('news_2').innerHTML = parsedbody[1]['title']; 
     document.getElementById('news_3').innerHTML = parsedbody[2]['title']; 
     document.getElementById('news_4').innerHTML = parsedbody[3]['title']; 
     document.getElementById('news_5').innerHTML = parsedbody[4]['title']; 

    }) 
     sleep(10000); 
    } 
}

該功能獲取新聞標題從一個API JSON數據。 config['newsapi']['sources'][i]圖像的名稱相匹配的目錄（配置[「newsapi」] [「源」]是一個列表）

這裏是HTML的相關部分：

<div id="img" class ="image"></div> 
    <img id="news_icon" class="news_head" /> 
    <div id="news_1" class ="news"></div> 
    <div id="news_2" class ="news"></div>

我的睡眠功能：

function sleep(ms) { 
    return new Promise(resolve => setTimeout(resolve, ms)); 
}

來源

2017-07-02 JC1

我們不希望/需要看到所有這些代碼。僅包含代碼的相關部分或者轉到[MCVE]（https：// stackoverflow。com/help/mcve） –

有多少'config ['newsapi'] ['sources']'在那裏？ –

請重新獲取您的JS代碼，因爲它是相關的。 –

問題必須與這一行：

document.getElementById('news_icon').src="img/news/" + config['newsapi']['sources'][i] + ".png";

在該行之前添加console.log(config['newsapi']['sources'][i]);並檢查輸出。

檢查以下內容：

也許config['newsapi']['sources']沒有字符串或錯誤的道路。
或者字符串是這樣的「bbc.png」，這意味着圖像的「src」屬性的值爲「img/news/bbc.png.png」（雙.png）
或返回的路徑有完整路徑，導致「img/news/img/news/bbc.png」
或者圖像鏈接是正確的，只是圖像不存在於該路徑中「img/news」。

編輯：

你可能想什麼做的是1，做一個請求到服務器，然後2.等待10秒鐘。

您的代碼無法按預期工作，因爲請求是異步函數，這意味着它不會等待睡眠函數。

下面介紹如何使用異步功能實現。我把你的迭代代碼setTimeout函數內部：

function newsAPI() { 
    for(i = 0; i<config['newsapi']['sources'].length; i++) { 
     setTimeout(function() { 
      document.getElementById('news_icon').src = "img/news/" + config['newsapi']['sources'][i] + ".png"; 
      request({ 
       url: 'https://newsapi.org/v1/articles?source=' + config['newsapi']['sources'][i] + '&sortBy=top&apiKey=' + config['newsapi']['api_key'], 
       method: 'get' 
       }, function (err, res, body){ 
        var parsedbody = JSON.parse(body) 
        parsedbody = parsedbody['articles']; 
        document.getElementById('news_1').innerHTML = parsedbody[0]['title']; 
        document.getElementById('news_2').innerHTML = parsedbody[1]['title']; 
        document.getElementById('news_3').innerHTML = parsedbody[2]['title']; 
        document.getElementById('news_4').innerHTML = parsedbody[3]['title']; 
        document.getElementById('news_5').innerHTML = parsedbody[4]['title']; 
       }); 
     }, 10000 * i); 
    } 
}

編輯2：

function newsAPI() { 
    for(i = 0; i<config['newsapi']['sources'].length; i++) { 
     setTimeout(function() { 
      document.getElementById('news_icon').src = "img/news/" + config['newsapi']['sources'][i] + ".png"; 
      request({ 
       url: 'https://newsapi.org/v1/articles?source=' + config['newsapi']['sources'][i] + '&sortBy=top&apiKey=' + config['newsapi']['api_key'], 
       method: 'get' 
       }, function (err, res, body){ 
        var parsedbody = JSON.parse(body) 
        parsedbody = parsedbody['articles']; 
        document.getElementById('news_1').innerHTML = parsedbody[0]['title']; 
        document.getElementById('news_2').innerHTML = parsedbody[1]['title']; 
        document.getElementById('news_3').innerHTML = parsedbody[2]['title']; 
        document.getElementById('news_4').innerHTML = parsedbody[3]['title']; 
        document.getElementById('news_5').innerHTML = parsedbody[4]['title']; 
        if(i+1 == config['newsapi']['sources'].length) {// if is last iteration, repeat again 
         setTimeout(newsAPI, 10000); 
        } 
       }); 
     }, 10000 * i); 
    } 
}

來源

2017-07-02 05:38:49 evilReiko

好的，所以我添加了打印語句來逐步循環。它只是吐出每次迭代，然後在循環結束時睡在最後......這非常奇怪。 – JC1

@ JC1我覺得不奇怪。註釋掉或刪除'sleep（10000）'並查看會發生什麼 – evilReiko

for循環以正確的順序打印，但是整個for循環完成後發生睡眠。我認爲這是問題 – JC1

過這種情況對我過去的這一週，

試試這個

document.getElementById('news_icon').src="img/news/" + config['newsapi']['sources'][i] + new Date().getTime() + ".png";

來源

2017-07-02 04:36:22 dimwittedanimal

不幸的是，仍然無法正常工作。 img標籤正在更新，但src不會從第一個更改。 – JC1

HTML img src沒有動態更新

回答

相關問題