Vue3里如何使用ref以及require动态引入图片_vue3 ref require

问题： Vue3里的setup中如何使用ref以及require动态引入图片

描述： 在Vue3项目中可以有一个背景图，背景图展示的值是由后台给予的，那么如何直接定义一个变量，然后控制变量的值进行require导入，而且在直接require的全路径的时候会报错

解决： 直接require一个变量会报错，目前也没有找到解决方案，当时可以require一个字符串+变量进行替代

//使用
setup() {
     async function init(): Promise<void> {
         const data: bgDataInterface = await getBgList();
         imgSrcPath.value = data.path;
     }
     const imgSrcPath = ref("");
     return {
         imgSrc: computed(() =>
             imgSrcPath.value === ""
                 ? null
                 : require(`../../../../../src/assets/bg/${imgSrcPath.value}.jpeg`)
         )
     };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15