vue中引入绝对路径报错的解决办法:1、使用“await import(’@/assets/img/22.png’);”方式引入路径;2、循环利用返回值请求本地图片即可。
本教程操作环境: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(''); const handleImgSrc = async()=>{ let m = await import('@/assets/img/22.png'); 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: '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视频教程》
以上是vue中引入绝对路径报错怎么办的详细内容。更多信息请关注PHP中文网其他相关文章!