viewerjs-react的使用及更新图片时的实时刷新

最新推荐文章于 2025-04-19 16:49:00 发布

原创最新推荐文章于 2025-04-19 16:49:00 发布

· 1.8k 阅读

1 ·

版权

文章标签：

#react.js #前端 #javascript

node 同时被 2 个专栏收录

6 篇文章

订阅专栏

5 篇文章

订阅专栏

viewerjs 是一个很好用的在线图片查看器，支持vue、react多版本，支持旋转、放大缩小、对置等操作功能。

我在使用 viewerjs for react时有个需求是需要上传替换原图并显示新图片，此时发现因为缓存原因无法显示最新图片，又不像vue那样可以直接对RViewerJS进行销毁操作

1.安装RViewerJS

npm i react-viewerjs

2.导入它

import RViewerJS from 'viewerjs-react'
import 'viewerjs-react/dist/index.css'

3.使用它

	<RViewerJS>
		<img src={this.image} width={830} height={800} />
	</RViewerJS>

我是如何解决的，我在this.image每次上传图片后，更改值的时候，将原来的url链接的最后添加了当前时间的时间戳，以保证它每次都会重新调用服务端获取新的图片请求。

//获取当前时间戳
var timestamp = Date.parse(new Date());
//确保从服务端获取新图像
this.image = "http://192.168.1.242:6002/project/imageMatching/api/getCorrespondingImage?loginId=" + userId + "&sc_box_no=" + item.sc_box_no + "&scanID=" + item.ID 
+ "&DATETIME=" + timestamp;