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服务器有问题,不过也聊胜于无吧。

相关推荐
@小红花29 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵31 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html