vite+vue3实现动态路径导入

最近在做一个项目有个需求: 项目图片分为英语,中文,德语 ,我将这些图片存放到/image/language/下面的每个语言的文件夹内,如en,zh-cn文件夹下面存放对应的语言的图片,如果在代码里面写路径的话,除了要写一堆路径还要判断不同的语言,非常麻烦,但是在vue3+vite里面import导入的是加载时的静态文件,require在vite里面使用不了,但是如果在代码里面html模版里面写一堆判断也不好,我翻了vite文档,找到了如下方法,可以动态加载对应图片,解决了我的问题,代码如下:

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const languageBag = ref("")

// 解析字符串路径动态构建图片路径
const imagePath = (fileName) => {
  // 动态导入图片
  const imgUrl = new URL(`../assets/image/language/${languageBag.value}/accumulatedExercise/${fileName}.png`,import.meta.url).href;
  console.log("imgUrl", imgUrl); // 打印结果: http://192.168.1.92:8080/src/assets/image/language/en/accumulatedExercise/oneDayTitle.png
  return imgUrl;
};


// 绑定的是字符串,不会被url解析,也就不会被显示到页面上
const url_one = ref("@/assets/image/language/en/accumulatedExercise/oneDayImg.png");

// 解析字符串路径动态构建图片路径,可以被展示到页面上面
const url_two = ref(null);

onMounted(()=>{
	// 获取当前语言
	languageBag.value = locale.value
	// 设置对应路径
    url_two.value = imagePath("oneDayImg");
})
</script>

<template>
  <div class="">
    <!-- 直接使用原生渲染图片 -->
    <img src="@/assets/image/language/en/accumulatedExercise/oneDayImg.png" alt="直接使用原生渲染图片"/>
    <!-- 使用模版绑定进行渲染,这种方式只是绑定了字符串,不会被解析为真实路径 -->
    <img :src="url_one" alt="使用模版绑定进行渲染" />
    <!-- 动态加载静态图片路径,将路径进行了url的解析,使其能被渲染出来 -->
     <img :src="url_two" alt="动态加载静态图片路径" />
  </div>
</template>

<style scoped lang="scss"></style>