在我的 desktop app 的一部分中,我编写了一个函数,它根据 json 文件的输出(发生变化)更新/重写 html div 文本和图像源,但是 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]
匹配目录中图片的名字(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>
我的 sleep 功能:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
最佳答案
问题必须出在这一行:
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 秒。
您的代码不会按预期工作,因为请求是一个异步函数,这意味着它不会等待 sleep 函数。
以下是使用异步函数执行此操作的方法。我将您的迭代代码放在 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);
}
}
关于javascript - HTML img src 不动态更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44867419/