刷新生成的图像

Question

我对网络技术相当陌生。

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

<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>

Answer 1

尝试使用 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; }

Answer 2

无法将网页用作图像或纹理。

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

刷新生成的图像

Refresh a generated image

html

javascript

refresh

image

src