Nuxt 3动态轮播图切换时重复请求图片的解决办法

针对你遇到的v-if切换时已加载图片重复发起请求的问题，可通过以下几种方式解决：

1. 用v-show替代v-if #

v-if会销毁并重建DOM元素，每次切换为true时都会重新创建<img>标签，触发浏览器重新请求图片。而v-show仅通过CSS控制元素显示/隐藏，DOM元素始终存在，不会重复发起请求。修改后的核心代码如下：

<Transition name="fade">
  <img
    v-show="showFirstImage && images.firstImage"
    draggable="false"
    loading="lazy"
    class="absolute object-contain w-full h-full"
    :alt="carouselDescription"
    :src="images.firstImage"
  >
</Transition>

2. 配置静态图片的强制缓存 #

确保浏览器对/public下的图片进行持久化缓存，即使DOM元素重建，也会直接从本地缓存读取，无需发起网络请求。在nuxt.config.ts中添加缓存规则：

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      // 匹配所有常见图片格式
      '/**/*.{png,jpg,jpeg,gif,webp,svg}': {
        headers: {
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      }
    }
  }
})

• max-age=31536000设置缓存有效期为1年
• immutable告知浏览器该资源不会变化，无需再次向服务器验证

3. 提前预加载所有轮播图片 #

在组件挂载时，提前创建Image对象加载所有轮播图片，将图片存入浏览器缓存，后续切换时直接使用缓存资源。在组件的setup中添加预加载逻辑：

import { onMounted, defineProps } from 'vue'

const props = defineProps({
  images: {
    type: Array,
    required: true
  },
  carouselDescription: {
    type: String,
    required: true
  }
})

onMounted(() => {
  // 遍历所有图片URL完成预加载
  props.images.forEach(imgUrl => {
    const preloadImg = new Image()
    preloadImg.src = imgUrl
  })
})

内容的提问来源于stack exchange，提问作者Daniel Rodríguez Meza