Vue.js/Vuetify中v-navigation-drawer本地背景图片不显示问题

核心原因 #

Vue模板中的静态属性（比如直接写image="@/assets/..."）不会被webpack的模块解析器处理，@别名仅在JavaScript代码和动态绑定语法中生效，导致最终生成的路径无法正确指向打包后的图片资源。

解决方法 #

方法1：使用v-bind结合require动态绑定路径 #

将image属性改为动态绑定，通过require()让webpack解析本地图片路径：

<v-navigation-drawer
    v-model="drawer"
    width="256"
    permanent
    :image="require('@/assets/bg-2.jpg')"
>
</v-navigation-drawer>

方法2：在script中导入图片后再绑定 #

先在组件的脚本部分导入图片资源，再绑定到组件的image属性：

<template>
  <v-navigation-drawer
      v-model="drawer"
      width="256"
      permanent
      :image="bgImage"
  >
  </v-navigation-drawer>
</template>

<script>
import bgImage from '@/assets/bg-2.jpg'

export default {
  data() {
    return {
      drawer: true,
      bgImage
    }
  }
}
</script>

额外检查项 #

• 确认图片文件名、路径完全匹配，注意大小写（Linux/macOS环境区分文件名大小写）
• 检查项目中@别名的配置是否正确（Vue CLI默认@指向src目录，若自定义过配置需确认）
• 确保webpack对图片资源的处理配置正常（Vue CLI默认会自动处理jpg/png等格式，无需额外配置）

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