最近在做一个项目有个需求: 项目图片分为英语,中文,德语 ,我将这些图片存放到/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("")

// 解析字符串路径动态构建图片路径