HTML img src not updating dynamically

In a section of my desktop app, I've written a function which updates/rewrites the html div text and an image source depending on the output of a json file (which changes), however the img src is not changing along with it.

What the app looks like. The 'logo' image should change when the text (news headlines) changes.

Here's the part of the 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);
  }
}

This function fetches news headlines as json data from an API. config['newsapi']['sources'][i] matches the names of the images in the directory (config['newsapi']['sources'] is a list)

Here is the relevant part of 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>

My sleep function:

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