Vue ＜img＞标签 src动态绑定标识，使得每个image都唯一

Chauncey_666

已于 2023-02-07 10:52:51 修改

阅读量1.2k

点赞数 1

文章标签： vue 前端

于 2023-02-07 10:32:56 首次发布

本文链接：https://blog.csdn.net/weixin_42627850/article/details/128912620

版权

文章讨论了一个在Vue项目中的业务场景，其中包含多个重复的gif图，这些图根据Websocket接收的状态进行切换。为了避免所有gif图同时重新加载导致的页面卡顿，作者建议在图片URL后动态拼接唯一的标识符（如item.id），而不是使用时间戳，以防止频繁切换造成的内存溢出。这种方法可以有效地管理和优化内存使用。

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

应用场景：在作者的项目中的业务场景是有一个重复多个.gif图的页面，这个.gif图存在多种状态，通过Websocket接收到的值切换不同图片更换状态，如果这个重复的gif图用的是一个地址，那么有一个切换状态时，就会发生所有相同状态的gif图重新加载的问题，看起来就像是卡了。这样存在重复多个gif图在页面上，我们不可能去导入多个图片，每个图片的名称都修改，这样费时费力费内存，可以选择的是在可以将gif图先导入应用的vue文件中，动态在src地址后面拼接唯一标识，如果回切换的，建议拼接对应图片唯一性标识，不采用时间戳去拼接，否则会造成内存溢出。

<body>
    <img
          v-show="item.state==1"
          src="@/assets/image/stop.png"
          alt=""
    <!--下面使用:src="runGif+'?'+item.id"动态的在图片地址后面拼接唯一标识。不拼接时间戳，频繁切换不会导致页面内存溢出-->
    <img
          v-show="item.state==2"
          :src="runGif+'?'+item.id"
          alt=""
    >
</body>
<script>
    import runGif from '@/assets/image/xxx.gif';
    created() {
        this.runGif = runGif;
    },
</script>

希望对有需要的各位有帮助