如何在Vuetify的v-img组件中使用SVG图片？

问题重现 #

使用Vuetify的v-img组件直接引用本地SVG时无法正常加载：

<!-- 无效代码 -->
<v-img src="../assets/logo.svg" width="40"></v-img>

但原生<img>标签可以正常显示该SVG：

<img src="../assets/logo.svg" width="40" />

可行解决方案 #

通过ES模块导入SVG资源，再通过绑定属性的方式传给v-img：

<script setup lang="ts">
import logo from '../assets/logo.svg'
</script>

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

为什么必须导入SVG？ #

这是因为v-img和原生<img>的资源处理逻辑存在差异：

• 原生<img>的src会直接被浏览器当作URL解析，浏览器会自行请求对应路径的文件，只要路径正确就能加载。
• 而Vuetify的v-img依赖项目构建工具（比如Vite、Vue CLI）的资源处理机制：
  • 直接写相对路径时，构建工具不会将这个路径识别为需要处理的模块资源，最终打包后可能出现路径错误，或者SVG文件未被正确纳入构建输出。
  • 通过import导入SVG时，构建工具会将其作为模块处理，生成正确的资源URL（开发环境的临时地址、生产环境带哈希的文件名），同时确保文件被复制到输出目录。此时import得到的变量就是处理后的有效URL，绑定到:src后v-img就能正确加载。

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