vue中引入绝对路径报错是什么原因？（解决方法）

vue中引入绝对路径报错是什么原因？下面编程教程网小编给大家详细介绍一下解决方法！

报错原因：

typescript不支持require所以之前直接用imgUrl: require(’…/assets/pic.png’)调用！

解决方法：

<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(){
      imgList = reactive([
         {url: 'a.png'},{url: 'b.png'},{url: 'c.png'}
      ])
      const getAssetsImages =(name)=> {
        return new URL(`/src/assets/pic/${name}`, import.meta.url).href; //本地文件路径
      }
      return{
      imgList,
        getAssetsImages 
      }
   }
}
</script>

以上是编程学习网小编为您介绍的“vue中引入绝对路径报错是什么原因？（解决方法）”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。