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

相关推荐
程序员爱钓鱼35 分钟前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel8 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着8 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友9 小时前
什么是API签名?
前端·后端·安全
会豪11 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子11 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶11 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子11 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_12 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233312 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts