当内存更新时刷新 html 页面上的图像

问题描述 投票:0回答:1

我是 html 和 Flask 的新手,非常感谢任何帮助。

我有一个 html 代码,其中显示两个定期更新的图像。每次再次保存/覆盖这些图像时,我都需要刷新它们。这是html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- include jQuery - better done in the head -->
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack of Images</title>
    <meta http-equiv="refresh" content="2">
</head>

<body>

    <img src="static/X.jpg" alt="Image 1" id = "img1" width="960" height="540">
    <img src="static/X_display.jpg" alt="Image 2" id = "img2" width="960" height="540">


</body>
</html>

javascript html python-3.x flask
1个回答
0
投票

不要使用重新加载,只需使用缓存破坏器和javascript

window.addEventListener('load',() => {
  const imgs = ["img1","img2"].map(img => document.getElementById(img));
  setInterval(() => {
    const rnd = new Date().getTime();
    imgs.forEach(img => img.src = `${img.src.split('?')[0]}?${rnd}`);
  },2000)
});
    <img src="static/X.jpg" alt="Image 1" id="img1" width="960" height="540">
    <img src="static/X_display.jpg" alt="Image 2" id="img2" width="960" height="540">

© www.soinside.com 2019 - 2024. All rights reserved.