html刷新图片

文章目录


前言

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

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

网页整体刷新

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

html 复制代码
<meta http-equiv="refresh" content="1">
html 复制代码
<!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是不是自己想要的,有没有设置对。

c 复制代码
<!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>

备注

上面方法都可以刷新图像,但是实际使用的效果有些不理想,图像很多时候刷不出来,不知道是不是使用的http服务器有问题,不过也聊胜于无吧。

相关推荐
北海-cherish1 天前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909061 天前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist1 天前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师1 天前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 天前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_1 天前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 天前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 天前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 天前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端