问题: 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`)
         )
     };
}
Logo

前往低代码交流专区

更多推荐