html刷新图片

最新推荐文章于 2023-08-20 16:33:10 发布

weixin_45090728

最新推荐文章于 2023-08-20 16:33:10 发布

阅读量1k

点赞数

分类专栏：海思学习笔记文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_45090728/article/details/131945023

版权

海思学习笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章介绍了在海思3516开发板上，通过不断编码JPEG图像并保存至同一文件以实现视频效果。两种前端刷新方法被提出：一是利用HTML的meta标签整体刷新网页，二是使用JavaScript的setInterval动态改变图像URL以达到刷新目的。然而，实际应用中可能出现图像刷新不理想的情况，可能与所用HTTP服务器有关。

摘要由CSDN通过智能技术生成

前言

海思3516的一个开发板，不断的采集图像编码为jpeg，保存为同一个文件。打算用网页实现查看视频的效果，需要前端能够自动刷新。

目前找到了两个方法，一个是网页的不断刷新，一个是页面内图像元素的不断刷新。

网页整体刷新

使用meta标签让浏览器不断刷新界面，和手动点刷新效果一样。

<meta http-equiv="refresh" content="1">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1">
<title>test</title>
</head>
<body>
    <img id="pic" src="snap_chn1.jpg" />
</body>
</html>

改变图像的url

使用setInterval不断改变图像的地址，这里加了个时间确保浏览器会去刷新，不加的话好像不变。
可以用浏览器去调试看url是不是自己想要的，有没有设置对。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
    <img id="pic" src="snap_chn1.jpg" />

    <script>
        setInterval(function(){
            var tmpImage = new Image();
            tmpImage.src = "snap_chn1.jpg"+"?t="+Math.random();
            document.getElementById("pic").src = tmpImage.src;

        }, 1000);
    </script>
</body>
</html>