欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

vite+vue3 实现动态路径导入

最编程 2024-10-10 07:41:27
...
<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>

推荐阅读