vite+vue3动态添加图片路径

问题
在vite+vue3 的使用场景下，根据后台返回的数据展示不同的背景图片？
1.直接根据拼接的相对路径进行展示发现报错，相对路径部分会被忽略找不到文件

state.compareStyle = `background: url(`../../../assets/images/${ compare <= 0 ? "greenSign.png" : "redSign.png"}`) no-repeat 0 center`;

在vite 中会直接变为

/assets/images/greenSign.png

2.使用vue2中的require写法也报错，因为require是对应webpack的处理方式。

解决
根据vite文档Glob导入
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob('./dir/*.js')

以上会被vite转译为下面的代码

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js')
}

匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用），你可以使用 import.meta.globEager 代替：

const modules = import.meta.globEager('./dir/*.js')

以上会被转译为下面的样子：

// vite 生成的代码
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1
}

请注意：

• 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
• 该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）。
• Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。
• 你还需注意，glob 的导入不接受变量，你应直接传递字符串模式。

答案
根据文档说明我们可以找到我们最终的答案

const picture = import.meta.glob("../../../assets/images/*")[`../../../assets/images/${ compare <= 0 ? "greenSign.png" : "redSign.png"}`];
state.compareStyle = `background: url(${ picture}) no-repeat 0 center`;

如果使用的是globEager

const picture = import.meta.globEager("../../../assets/images/*")[`../../../assets/images/${ compare <= 0 ? "greenSign.png" : "redSign.png"}`];
state.compareStyle = `background: url(${ picture.default}) no-repeat 0 center`;