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


基础教程推荐
猜你喜欢
- Vue项目开发中报“TypeError: Cannot read property 'yyy' of null”错误怎么解决? 2025-01-12
- 简单实现ajax拖拽上传文件 2023-02-14
- CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与:before 2023-12-29
- js实现当鼠标移到表格上时显示这一格全部内容的代码 2023-12-27
- layui获取select下面的选项值和value值 2023-10-08
- 基于打包工具Webpack进行项目开发实例 2024-03-08
- vue使用GraphVis开发无限拓展的关系图谱的实现 2023-12-20
- 关于ajax的使用方法_例题、ajax的数据处理 2023-02-01
- vue实现拖拽小图标 2024-01-24
- 原生JS实现LOADING效果 2023-12-01