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