Vuetify v-card组件img属性设置背景图片无法显示问题求助

先排查最容易忽略的低级错误：你示例代码中的闭合标签写错了，</card>必须改为</v-card>，标签不匹配会导致组件属性不生效。

根据你使用的构建工具选择对应写法即可：

Webpack环境（Vue CLI创建的项目） #

v-card的img属性需要用动态绑定触发资源解析，直接传静态字符串路径不会触发webpack的模块处理逻辑，正确写法：

<v-card :img="require('../assets/gradient.svg')"> </v-card>

注意：动态绑定必须加冒号:，如果漏写会把require(xxx)当成普通字符串处理，不会执行对应逻辑。

Vite环境 #

Vite不支持require()语法，需要先引入静态资源再绑定到属性上：

<script setup>
// 先引入资源
import gradientBg from '../assets/gradient.svg'
</script>

<template>
  <v-card :img="gradientBg"> </v-card>
</template>

通用备用方案 #

如果不想区分构建环境，可以把gradient.svg放到项目根目录的public文件夹下，直接写绝对路径即可，不需要额外处理：

<v-card img="/gradient.svg"> </v-card>

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