HTML img src沒有動態更新

Question

在我的桌面應用程序的一部分中 ，我編寫了一個函數，根據json文件的輸出（更改）更新/重寫html div文本和圖像源，但是img src並沒有隨之改變。

什么應用程序看起來像 。 當文本（新聞標題）發生變化時，“徽標”圖像應該會發生變化。

這是函數的一部分：

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]匹配目錄中圖像的名稱（config ['newsapi'] ['sources']是一個列表）

以下是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));
}

Answer 1

問題必須與這一行：

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”的值（double .png）
• 或者返回的路徑有完整路徑，結果是“img / news / img / news / bbc.png”
• 或者圖像鏈接可能是正確的，只是圖像不存在於“img / news”路徑中。

編輯：

您可能想要做的是1.向服務器發出請求，然后等待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);
    }
}

Answer 2

如果過去一周發生在我身上，

試試這個

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