Javascript HTML img src未动态更新

在我的一节中，我编写了一个函数，该函数根据json文件的输出更新/重写HTMLdiv文本和图像源（会发生变化），但是IMGSRC不会随之变化

应用程序的外观。文本（新闻标题）更改时，“徽标”图像应更改

以下是报告的一部分：

我的睡眠功能：

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

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);
    }
}

---

如果这件事在过去的一周发生在我身上

试试这个

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

---

问题必须与这一行有关：

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

添加

console.log（配置['newsapi']['sources'][i]）在该行之前，并检查输出

检查以下各项：


可能
config['newsapi']['sources']
没有字符串或路径错误
或者字符串类似于“bbc.png”，这意味着图像的“src”属性的值为“img/news/bbc.png.png”（double.png）
或者返回的路径具有完整路径，结果为“img/news/img/news/bbc.png”
或者图像链接是正确的，只是图像不存在于路径“img/news”中

编辑：

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);
    }
}

您可能想做的是1。对服务器执行请求，2。然后等待10秒钟

您的代码将无法按预期工作，因为请求是一个异步函数，这意味着它不会等待sleep函数

下面是如何使用异步函数来实现这一点。我将迭代代码放在
setTimeout
函数中：

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

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);
    }
}

函数newsAPI（）{
对于（i=0；我不想/不需要看到所有这些代码。只包括代码的相关部分，或者查找有多少
config['newsapi']['sources']
的代码？请取回您的JS代码，因为它是相关的。@UsagiMiyamoto，我现在已经编辑了代码。
config['newsapi']['sources']
是一个列表（因此元素的数量是任意的）不幸的是，仍然不起作用。img标记正在更新，但src没有从第一个更改。好的，所以我添加了打印语句来逐步完成循环。它只是吐出每个迭代，然后在循环结束时休眠…这非常奇怪。@JC1我不觉得奇怪。注释掉或删除
sleep（10000）
然后看看发生了什么for循环按正确的顺序打印，但是睡眠发生在整个for循环完成之后。我想这就是problem@JC1
request
函数是异步的，这意味着它不会等待sleep函数。我已经编辑了我的答案。谢谢！它现在可以工作了，只是做了一些更改（声明匿名函数以便可以使用计数器变量）