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中引入绝对路径报错是什么原因?(解决方法)


猜你喜欢
- CSS浮动引起的高度塌陷问题 2024-01-02
- Ajax跨域问题及解决方案(jsonp,cors) 2023-02-23
- 通达OA 使用Ajax和工作流插件实现根据人力资源系统数据增加OA账号(图文详解) 2023-01-26
- vue如何利用flex布局实现TV端城市列表 2025-01-14
- 只出现一次的提示信息(js+cookies) 2024-03-01
- CSS3实现王者荣耀匹配人员加载页面的方法 2024-02-21
- javascript – 如何从HTML表格中将数据插入mysql数据库 2023-10-26
- vxe-list vue 如何实现下拉框的虚拟列表 2024-02-19
- 不要在HTML中滥用div 2022-11-13
- 解决微信返回上一页,页面中的AJAX的请求,对Get请求无效的问题 2023-01-26