首页  >  文章  >  web前端  >  vue中引入绝对路径报错怎么办

vue中引入绝对路径报错怎么办

藏色散人
藏色散人原创
2023-01-29 14:57:012023浏览

vue中引入绝对路径报错的解决办法:1、使用“await import(’@/assets/img/22.png’);”方式引入路径;2、循环利用返回值请求本地图片即可。

vue中引入绝对路径报错怎么办

本教程操作环境:Windows10系统、vue3版、DELL G3电脑

vue中引入绝对路径报错怎么办?

vue3+vite :src 用require引入绝对路径报错

最近的项目是vue3+vite,在使用require引用图片路径的时候就报错 require is not defined,就很尴尬,因为typescript不支持require所以之前直接用imgUrl: require(’…/assets/test.png’) 导入就会报错需要用import导入,记录一下解决方法:

第一种:使用await import(’@/assets/img/22.png’);

<template>
    <img :src="imgUrl" alt="">
</template>
 
<script>
    import {ref, onMounted} from "vue";
    export default {
        name: "imgPage",
        setup(){
            onMounted(()=>{
                handleImgSrc();
            })
            const imgUrl = ref(&#39;&#39;);
            const handleImgSrc = async()=>{
                let m = await import(&#39;@/assets/img/22.png&#39;);
                imgUrl.value = m.default;
            };
            return{
                imgUrl
            }
        }
    }
</script>

第二种:循环利用返回值请求本地图片

<template>
    <img  v-for="item in imgList" :src="getAssetsImages(item.url)" alt="">
</template>
 
<script>
    import {ref, reactive, onMounted} from "vue";
    export default {
        name: "imgPage",
        setup(){
        
       const imgList = reactive([
{url: &#39;a.png&#39;},{url: &#39;b.png&#39;},{url: &#39;c.png&#39;}
])
             const getAssetsImages =(name)=> {
      return new URL(`/src/assets/pic/${name}`, import.meta.url).href; //本地文件路径
}
 
            return{
            imgList ,
                getAssetsImages 
            }
        }
    }
</script>

推荐学习:《vue视频教程

以上是vue中引入绝对路径报错怎么办的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn