HTML img src 没有动态更新

Posted 2023-02-23

【中文标题】HTML img src 没有动态更新

【英文标题】：HTML img src not updating dynamically

【发布时间】：2017-12-05 15:37:25

【问题描述】：

在我的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['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));

【问题讨论】：

我们不想/不需要看到所有这些代码。只包括代码的相关部分或去MCVE

config['newsapi']['sources'] 有多少个？

请取回您的 JS 代码，因为它是相关的。

@UsagiMiyamoto，我现在已经编辑了代码。 config['newsapi']['sources'] 是一个列表（所以元素的数量是任意的）

【参考方案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”（双.png） 或者返回的路径包含完整路径，导致“img/news/img/news/bbc.png” 或者图片链接是正确的，只是图片在路径“img/news”中不存在。

编辑：

您可能想做的是 1. 向服务器发出请求，2. 然后等待 10 秒。

您的代码将无法按预期工作，因为 request 是一个异步函数，这意味着它不会等待 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);
    

【讨论】：

好的，所以我添加了打印语句来单步执行循环。它只是吐出每次迭代，然后在循环结束时在最后休眠......这很奇怪。

@JC1 我不觉得奇怪。注释掉或删除sleep(10000) 看看会发生什么

for 循环以正确的顺序打印，但睡眠发生在整个 for 循环完成后。我认为这是问题

@JC1 request 函数是异步的，这意味着它不会等待睡眠函数。我已经编辑了我的答案。

谢谢！它现在可以工作了，有一些变化（声明匿名函数以便它可以使用计数器变量）

【参考方案2】：

上周发生在我身上，

试试这个

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

【讨论】：

不幸的是，仍然无法正常工作。 img 标签正在更新，但 src 与第一个标签相比没有变化。