前端IMG图片通过src属性请求后台的方式加载图片，请求只进行一次

原创于 2018-10-17 10:18:49 发布 · 2.5w 阅读

12 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在前端展示流程图并高亮当前节点的方法，通过动态请求后台获取流程实例图片，确保不同环节正确显示高亮状态。关键在于利用随机数避免浏览器缓存导致的显示错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

收到一个需求就是展示流程图，正在运行的节点显示高亮。在网上提供了很多的解决方案，这里就不讲解实现方法了；我用的是前段使用img图片，通过src属性请求后台查询资源图片的方案；

<img id="processImg" width="100%"/>

<script>
    $("#processImg").attr("src","getActivitiProccessImage?processInstanceId="+processInstId+"&r="+Math.random());
</script>

注意我这边的src后面跟了一个Math,random()函数，就是因为当我的流程实例id是同一个值时，不同的环节展示的就是形同的图片，高亮的环节也没有变；原因就是只请求了一次后台方法；加上这个随机数之后，就不会发生这个情况了；