刷新生成的图像答案

【问题标题】：Refresh a generated image刷新生成的图像
【发布时间】：2017-03-26 18:25:11
【问题描述】：

我对网络技术相当陌生。

嵌入网络服务器的软件输出动态图像在本地主机上：

<img src="http://localhost:8000/" alt="http://localhost:8000/" class="transparent shrinkToFit" width="419" height="428">

此图像由软件定期更新。我正在尝试在 Web 浏览器中显示此更新。有几个相关的帖子，我尝试了两种解决方案，但到目前为止都没有运气。

以下是受现有代码启发的两次尝试，但都失败了。该问题似乎与某些缓存效果有关，但我不确定如何解决此问题。

提前致谢，

传统

   <html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
    <!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="rsc/stylesheet.css" type="text/css" charset="utf-8" />
<!--        <script>
                    setInterval(function() {
                        var url = "http://localhost:8000";//document.getElementById("url").value;
                        var xhr = new XMLHttpRequest();
                        xhr.open("GET",url);
                        xhr.responseType = "blob";
                        xhr.onreadystatechange = function() {
                        if (xhr.readyState == xhr.DONE && xhr.status == 200 ) { // xhr.readyState == xhr.DONE &&
                            // Render the downloaded image
                            var myblob = xhr.response;
                            var image = document.getElementById("ImageMusic");

                            image.addEventListener("load", function (evt) {
                URL.revokeObjectURL(evt.target.src);
                            });
            image.src = URL.createObjectURL(myblob);
                        }
                    }
                    xhr.send(null);
                    }, 100);



        </script>
-->
                <script>
                    setInterval(function() {
                        var myImageElement = document.getElementById('ImageMusic');
                        myImageElement.src = 'http://localhost:8000?rand=' + Math.random();
                    }, 100);
                </script>
        <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>

        <a-scene>
            <a-assets>
                <img id="ImageMusic" src="http://localhost:8000" />
            </a-assets>
            <a-image position="1 1 -4" width="4" height="4" src="#ImageMusic"></a-image>
        </a-scene>
  </body>
</html>

【问题讨论】：

希望再次设置图像 src 可能会像 iframe 那样强制它重新加载

标签： javascript html image refresh src

【解决方案1】：

不能将网页用作图像或纹理。

在 A-Frame 的上下文中，您也不能将 I-Frames 用作图像或纹理，这在浏览器中是不可能的。

【讨论】：

您是说这种方法行不通，还是说我试图实现的目标不可行（或者至少不是直接的方式）？我今天做了一些进一步的实验，其中 setInterval 的注释代码实际上适用于普通图像。我现在更了解它的作用，并尝试直接在 A-image 上使用它。由于它只是更新了 src，我认为它可以很好地在通用对象上工作，也可以在 a-image 的特定情况下工作。它没。对网络开发不够熟悉，无法决定是否需要这样做。
更有趣的是，你知道刷新a-frame中图像的方法吗？

【解决方案2】：

尝试使用 iframe <iframe src="http://localhost:8000/">Your browser does not support the iframe HTML tag</iframe> 这应该会自动更新。

或者，您可以使用<embed src="http://localhost:8000/"></embed> 标记。只要您为图像设置了像素大小（例如：1080x720），滚动或拉伸图像就不会有任何问题。

CSS：

embed { width:1080px; height: 720px; }

【讨论】：

这两个元素似乎是要显示的。我正在寻找一种解决方案，当显示通过 A 框架库中的另一个对象发生时刷新引用。无论如何感谢您的回答。