在 src 属性中设置图像的 url 是否可以使图像在 Internet 中更改时更改

Question

很难形成我的问题标题...我正在编写自己的 windows 侧边栏小工具，我想显示当前的月相，所以我在互联网上搜索了这个，我得到了一个网站显示：

http://www.iceinspace.com.au/moonphase.html

如果我获取图片 url (http://www.iceinspace.com.au/moon/images/phase_150_095.jpg) 并将其设置在图片 src 属性中：

<img id="CurrentMoon" src="http://www.iceinspace.com.au/moon/images/phase_150_095.jpg"></img>

当html文档在javascript中加载时我再次设置：

              function showFlyout(event)
            {
document.getElementById("CurrentMoon").src = "http://www.iceinspace.com.au/moon/images/phase_150_095.jpg";
            }

图片在网上换了会变吗？？

Answer 1

您说的是正确的，如果 /moon/images/phase_150_095.jpg 中的图像被新图像替换，即图像文件已更改但图像的 URL 保持不变，您的小部件可以正常工作，但因为它碰巧他们通过更改图像 url 来更改图像（例如，现在它是 phase_150_099.jpg ），因此如果您将 img 的 src 属性设置为固定 URL，它将显示相同的图像。正确的解决方案是：

1) 假设您的小工具来源与 www.iceinspace.com 不同，请使用 CORS 或 JSONP 向 iceinspace 发出跨域请求 2）创建一个文档对象并通过这样的XPath查找获取图像元素

function showFlyout(event)
{
  url = http://www.iceinspace.com.au/moonphase.html;
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.open('GET', url, true);
  xmlhttp.send(null);
  moonphasedoc = document.implementation.createHTMLDocument("");
  moonphasedoc.open("replace");
  moonphasedoc.write(xmlhttp.responseText);
  moonphasedoc.close(); 
  var element = moonphasedoc.evaluate( '//body/table/tbody/tr/td[3]/p/table/tbody/tr/td/table[1]/tbody/tr/td[1]/img' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue; //just copied the Xpath from element inspector :D
  document.getElementById("CurrentMoon").src = element.src;
 }

附：这只有在你有 Access-Control-Allow-Origin: * on the iceinspace 时才有效

Answer 2

如果服务器（互联网）上的图像发生变化但名称相同且未缓存，那么当您通过 JavaScript 加载图像时，您的图像也会发生变化。

但是，如果图像被缓存，那么它不会改变（你会看到旧图像）。

要查看服务器上的最新图像，每次发出请求时，您都需要在 URL 中附加一个唯一的字符串。 例如，

function showFlyout(event)
{
    var d = new Date();
    var n = d.getTime();
    document.getElementById("CurrentMoon").src = "http://www.iceinspace.com.au/moon/images/phase_150_095.jpg?v="+n;
}