Memory Cache 没生效？Vue组件里图片重复请求怎么回事？

Zz子格提问于 2026-03-09 12:28:18 阅读 62

优化

我在 Vue 项目里用 img 标签加载同一张图片，按理说浏览器应该走 Memory Cache，但每次切换组件都会重新请求，network 面板里状态是 200 而不是 (memory cache)。是不是我哪里写错了？

试过加 key、用 v-show 替代 v-if，都没用。图片地址是静态资源，路径没错。

<template>
  <div v-if="show">
    <img src="@/assets/logo.png" alt="logo" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

我来解答赞 9 收藏

反馈

2 条解答

ლ秀兰 Lv1

这个问题听起来像是浏览器缓存策略或者 Vue 的渲染机制导致的。浏览器通常会缓存静态资源，但是 Vue 的动态切换组件可能会绕过一些缓存机制。

可以试试这样，在你的标签里添加一个固定的 key 属性，即使你之前试过了，但确保这个 key 是全局唯一的，或者至少在切换组件时不会改变。有时候 Vue 的 diff 算法可能会因为 key 的变化而认为这是一个新的元素，从而重新请求资源。

key="uniqueKey"

或者你可以尝试给图片地址添加一个时间戳或者版本号作为查询参数，这样浏览器会认为这是一个新的请求，但实际上并不会真正改变图片内容。

src="@/assets/logo.png?v=1.0"

不过这种方式不太推荐，因为它会导致浏览器无法有效利用缓存。

最后，检查一下你的浏览器设置和网络条件，确保没有禁用缓存或者网络问题影响了缓存效果。

希望这些建议能帮到你，如果问题依旧存在，可能得再深入检查一下 Vue 的渲染逻辑或者是服务器端的缓存配置了。

2026-03-21 07:04

公孙爱玲 Lv1

这问题我遇到过，其实是Vue的模块系统和webpack搞的鬼。你用的@/assets/路径会被webpack处理成带哈希的新URL，每次重新加载组件时相当于请求的是"不同"的图片。

解决方法有两种：

简单粗暴的，直接把图片放到public目录下，用绝对路径引用：

<img src="/logo.png" alt="logo" />

或者用require包裹静态资源路径，让webpack知道这是同一个文件：

<img :src="require('@/assets/logo.png')" alt="logo" />

第二种方法会保留webpack的处理能力，比如图片压缩啥的。不过说实话，WordPress搞多了之后看Vue这些打包工具总觉得太折腾，还不如直接扔CDN来得痛快。

2026-03-09 13:00