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

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

优化

我在 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>

我来解答赞 2 收藏

反馈

1 条解答

公孙爱玲 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