Nuxt 3 + Vuetify 中图片路径问题求助

这是相对路径解析差异导致的资源加载失败：

• 非嵌套页面（如pages/index.vue）处于网站根路径，相对路径images/image.png会被解析为/images/image.png，刚好匹配public/images/image.png的位置；
• 嵌套页面（pages/something/index.vue）的路径是/something/，相对路径会被解析为/something/images/image.png，而这个路径下不存在对应的图片资源。

解决方法 #

1. 使用根路径绝对地址 #

直接在路径前加斜杠，强制从网站根目录开始查找资源，适配所有页面层级：

<v-img src="/images/image.png" />

2. 结合项目的publicPath变量（适配多环境部署） #

如果项目需要适配不同部署环境（比如子目录部署），可以用框架提供的环境变量拼接路径：

• Vue CLI项目：

<v-img :src="`${process.env.BASE_URL}images/image.png`" />

• Vite项目：

<v-img :src="`${import.meta.env.BASE_URL}images/image.png`" />

3. 静态资源导入（备选方案） #

如果把图片迁移到src/assets目录下，也可以通过导入方式使用（适合需要webpack处理的资源）：

<script setup>
import image from '@/assets/image.png'
</script>

<template>
  <v-img :src="image" />
</template>

内容的提问来源于stack exchange，提问作者stackoverflowuser