Question

我正在研究设置一个显示简单选择标准的基本网站（1个下拉框，2个单选按钮组），当单击提交按钮时，它会打开一个弹出窗口，显示指定位置的图像按选择标准。此图像随机更新，因此弹出窗口需要刷新或至少获取并显示每分钟的新图像。

我已经设置了一个简单的html网站（见下文），该网站显示位于我的机器上的图像，每隔30秒刷新一次。

<head>
   <meta http-equiv="refresh" content="30">
    <title>
    Real Time Image Display
    </title>
    <style>
     #geo img {
     max-width:100%; 
     max-height:100%;
     margin:auto;
     display:inline-block;
     vertical-align: middle;
     background-size: cover;
     }
    </style>
 </head>
 <body bgcolor=#00336>
    <div id="geo">
    <img src="file:///fileLocation/image.png" height="300" width="550"  alt=""> 
    </div>
</body>

我不相信这是做到这一点的最佳方式，也无法弄清楚如何使用此解决方案完成我的原始任务，因为我不确定如何将选择标准传递给这些简单的html网站指向他们到正确的形象。

关于我在哪里可以看到或我能做些什么的任何想法？

Answer 1

首先，您需要为图片添加ID标记：

<img src="file:///fileLocation/image.png" id="imageToChange" height="300" width="550"  alt="">

然后您可以使用JavaScript更改图像，而无需刷新：

function changeImage() {
document.getElementById("imageToChange").src = "/newimage.png";
}

无论如何，这是它的基础。应该注意的是，您的图像不应该像现在这样从本地文件系统中提取。它需要在服务器上。

这是一个非常简单的小提示，展示了它是如何工作的： https://jsfiddle.net/durbnpoisn/r7fk8ubz/

关于编程用户输入显示所选图像的网页的建议

1 个答案: