如何在Vuetify3的v-img组件中导入相对路径本地图片？

问题原因 #

原生<img>标签的src会被Vue的构建工具（Webpack/Vite）自动解析@别名，但Vuetify的<v-img>组件默认不会处理这类Webpack路径别名，导致直接使用@/xxx路径时无法正确加载本地图片。

解决方法 #

方法1：使用require()动态绑定路径 #

通过动态绑定src属性，用require()包裹路径，让构建工具解析资源：

<v-img :src="require('@/images/my-local-img.jpg')"></v-img>

注意必须用:src（动态绑定语法），因为require()是JS表达式，无法直接写在静态src属性中。

方法2：全局配置Vuetify资源解析器 #

如果不想每个v-img都写require()，可以在Vuetify配置中自定义资源解析逻辑，自动处理@别名：

Vite项目示例（vuetify.js）：

import { createVuetify } from 'vuetify'

export default createVuetify({
  assets: {
    resolver: (src) => {
      // 处理@/开头的路径，替换为src目录下的相对路径
      if (src.startsWith('@/')) {
        return new URL(src.replace('@/', './src/'), import.meta.url).href
      }
      return src
    }
  }
})

Webpack项目示例（vuetify.js）：

import { createVuetify } from 'vuetify'

export default createVuetify({
  assets: {
    resolver: (src) => {
      if (src.startsWith('@/')) {
        return src.replace('@/', '../') // 根据项目目录结构调整相对路径
      }
      return src
    }
  }
})

配置完成后，即可直接使用：

<v-img src="@/images/my-local-img.jpg"></v-img>

方法3：使用不依赖别名的相对路径 #

如果组件和图片的目录结构固定，直接写相对路径即可：

<!-- 假设组件在src/components，图片在src/images -->
<v-img src="../images/my-local-img.jpg"></v-img>

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