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 模块化详解 2023-08-11
- 利用HTML5分片上传超大文件工具 2023-10-26
- JS获取单击按钮单元格所在行的信息 2023-12-15
- Vue.js中引入图片路径的几种方式 2023-10-08
- JavaScript原始值与包装对象的详细介绍 2023-12-26
- CSS清除浮动使父级元素展开的三个方法 2023-12-19
- Ajax解决缓存的5种方法总结(推荐) 2023-01-26
- CSS在UL LI的样式用法(UI上的应用) 2023-12-08
- 五款漂亮的纯CSS3动画按钮的实例教程 2023-12-21
- 关于图片与文字垂直方向不对齐问题的解决方法 2024-02-08
