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 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vue中引入绝对路径报错是什么原因?(解决方法)


基础教程推荐
猜你喜欢
- JavaScript中Cookie操作实例 2024-02-06
- 常用正则表达式合集 2024-12-15
- 微信小程序实现商品分类页过程结束 2023-07-09
- uniapp如何动态显示头部title,navigationBarTitleText动 2024-12-08
- javascript实现手机震动API代码 2024-01-05
- HTML学习总结 2023-10-28
- 一个简单的弹性返回顶部JS代码实现介绍 2024-04-03
- AJAX跨域问题解决方案详解 2023-02-24
- CSS网页布局入门教程6:左列固定,右列宽度自适应 2024-03-11
- 关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案 2024-01-04