使用Vuetify的v-img组件无法加载assets目录下图片求助

问题分析 #

普通<img>标签的src会被Webpack的html-loader自动解析别名（比如@），但Vuetify的<v-img>作为Vue组件，直接写静态字符串的src时，Webpack不会对其进行路径解析，导致无法正确定位资源。

解决方案 #

方法1：用v-bind结合require引入 #

将src改为绑定属性，通过require()让Webpack处理路径：

<v-img :src="require('@/assets/images/rima_logo.png')"></v-img>

方法2：脚本导入后绑定 #

先在组件脚本中导入图片资源，再绑定到v-img的src上：

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

<script>
import logoImage from '@/assets/images/rima_logo.png'

export default {
  data() {
    return {
      logoImage
    }
  }
}
</script>

额外检查点 #

• 确认图片文件确实存在于src/assets/images/rima_logo.png路径下
• 若使用Vuetify旧版本，可尝试替换为相对当前组件的路径（比如../assets/images/rima_logo.png）

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