Question

我正在处理一个html文档，该文档可在Apachee2服务器上使用，以便在一页上查看6个网络摄像头，以监视我们学校的3D打印机。我可以制作一个简单的页面来显示图像，并刷新页面以刷新图像，因为我正在使用图像而不是MJPEG流来防止过多的网络带宽使用。我希望这些图像每秒刷新一次，而无需重新加载页面。我只需要一个简单的解决方案，即可同时刷新所有6个Feed，而无需重新加载页面。谢谢！

由于是初学者，我浏览了大约20篇有关该问题的文章，但没有一篇能起作用。

<body>
    <img src="http://example:8080/?action=snapshot" width="320" height="240">
<img src="https://example:8081/?action=snapshot“ width="320" height="240">
<img src="https://example:8082/?action=snapshot" width="320" height="240">
<img src="https://example:8083/?action=snapshot" width="320" height="240">
<img src="https://example:8084/?action=snapshot" width="320" height="240">
<meta http-equiv="refresh" content="2">

</body>

Answer 1

我会考虑使用AJAX，这样就不必重新加载页面。此处可能的解决方案：How to reload an image using ajax

Answer 2

使用香草javascript：

b = 1.43*0.0000001
 f = NDSolve[{D[T[x, y, z, t], t] == 
     b*(D[T[x, y, z, t], x, x] + D[T[x, y, z, t], y, y] + 
        D[T[x, y, z, t], z, z]), 
    T[x, y, z, 0] == If [0 < y < 3 && 0 < z < 3, 200, 25], 
    T[x, y, z, 0] == T[0, y, z, 0] == T[x, 0, z, 0] == 
     T[x, y, 0, 0] == T[15, y, z, 0] == 25, {x, 0, 15}, {y, 0, 7}, {z,
      0, 5}, {t, 0, 20}]; T
c = Table[
  Plot3D[T[x, y, z, t] /. f, {x, 0, 15}, {y, 0, 7}, {z, 0, 5}, 
   Mesh -> 15, PlotRange -> {{0, 5}, {0, 5}, {0.5}}, 
   ColorFunction -> Function[{x, y, z}, Hue[.3 (1 - x)]]], {3, 4, 2, 
   t}]; c

这实际上是将以秒为单位的当前时间附加到图像上，因此强制获取非缓存版本

Answer 3

元标记应位于<head>部分中，也应位于content参数中，您需要在需要刷新的秒数后放置网址。

在代码的第二张图片中src参数中有一个错误的引号结束标记

<head>
  <meta http-equiv="refresh" content="2; url=http://example.com/">
</head>

<body>
  <img src="https://picsum.photos/200">
</body>

Answer 4

javascript .. 将src放置在另一个属性中，并使用时间参数更新src属性

<body>
    <img data-src="http://example:8080/?action=snapshot" width="320" height="240">
    <img data-src="https://example:8081/?action=snapshot" width="320" height="240">
    <img data-src="https://example:8082/?action=snapshot" width="320" height="240">
    <img data-src="https://example:8083/?action=snapshot" width="320" height="240">
    <img data-src="https://example:8084/?action=snapshot" width="320" height="240">

    <script>
    let refresh = function() {
        let imgs = document.getElementsByTagName( 'img');

        for ( let i = 0; i < imgs.length; i++) {
            let src = imgs.item(0).getAttribute('data-src');
            src += '&t=' + Date.now();
            // looks like https://example:8084/?action=snapshot&t=19999999
            imgs.item(0).setAttribute('src', src);

        };

    }

    window.setInterval( refresh, 1000);

    </script>
</body>

如何刷新HTML中的图像？

4 个答案: