HTML img src没有动态更新

时间:2017-07-02 04:20:51

标签: javascript html electron

在我desktop app的一个部分中,我编写了一个函数,根据json文件的输出(更改)更新/重写html div文本和图像源,但是img src并没有随之改变。

应用看起来like。 '徽标'当文本(新闻标题)发生变化时,图像应该会改变。

这是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 [&#39; newsapi&#39;] [&#39; sources&#39;]是一个列表)

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

2 个答案:

答案 0 :(得分:2)

问题必须出在这一行:

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

答案 1 :(得分:0)

上周这件事发生在我身上,

试试这个

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