Vuetify v-img组件无法加载绝对路径图片问题求助

我来帮你搞定这个v-img加载图片的问题，咱们一步步拆解原因和解决方案：

首先得明确为什么直接写src="src/assets/project_atv_logo.jpg"不行：Vue项目在开发或打包时，静态资源的路径是由Webpack处理的，浏览器并不会直接访问你项目里的src源码目录（这个目录最终会被打包到dist文件夹），所以直接写这种绝对路径会导致浏览器找不到资源。

至于你用require('path/to/img')报错，大概率是路径写法不符合Webpack的解析规则，下面给你几个可行的解决办法：

方案1：用相对路径（最简单直接） #

根据你的组件文件所在位置，编写相对于组件的路径。比如如果你的组件在src/components/XXX.vue里，那么指向src/assets的相对路径就是../assets/，代码改成这样：

<v-img src="../assets/project_atv_logo.jpg" class="mb-4" contain height="128"></v-img>

如果是动态路径的场景，推荐用绑定语法：

<v-img :src="require('../assets/project_atv_logo.jpg')" class="mb-4" contain height="128"></v-img>

这里的核心是：路径是相对于当前组件文件的位置，不是项目根目录。

方案2：配置Webpack别名，用@快速访问src目录 #

如果你的项目还没配置别名，可以在vue.config.js（没有的话就新建一个）里添加如下配置，把@指向项目的src目录：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      alias: {
        '@': require('path').resolve(__dirname, 'src')
      }
    }
  }
})

配置完重启开发服务器，之后不管组件在哪个目录，都可以用@统一访问src下的资源，代码改成：

<v-img :src="require('@/assets/project_atv_logo.jpg')" class="mb-4" contain height="128"></v-img>

额外提醒（针对Mac用户） #

Mac系统的文件名是大小写敏感的，一定要确保代码里写的文件名和src/assets里的文件名完全一致，比如Project_atv_logo.jpg和project_atv_logo.jpg会被视为两个不同的文件，这很容易被忽略，记得检查一下拼写和大小写哦！

内容的提问来源于stack exchange，提问作者Andor Németh