Vue3+Vite中不支持require的方式引入本地图片的解决方案
更新时间：2024年01月22日 10:24:40 作者：小付学代码
这篇文章主要介绍了Vue3+Vite中不支持require的方式引入本地图片的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue3+Vite中不支持require的方式引入本地图片
使用vue2+webpack的时候是用require引入图片
require(`../assets/${img}.png`)但是vue3+vite这么写就报错：
require is not define
原因是require是webpack的方法，vite找不到对应的图片路径，需要使用下面的方式进行处理。
详细见官网解释：
静态资源处理 {#static-asset-handling} | Vite中文网
使用vite也有两种引入静态文件方法：
第一种
import imageIcon from "../assets/image.png"; <img class="patient" :src="imageIcon" />
第二种
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。
将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL。
const url = new URL('静态路径', import.meta.url).href第一个参数即图片的路径，这里就是对应require中的值。
第二个参数是vite的一个全局变量，可以理解成直接写死了 import.meta.url
使用示例：
<img :src="index !== clickIndex ? downImg : upImg">
// 导入两张图片
const downImg = new URL('../../assets/index/down.png', import.meta.url).href
const upImg = new URL('../../assets/index/up.png', import.meta.url).href总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文分步骤给大家介绍了Vue使用枚举类型实现HTML下拉框的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue 登录滑动验证实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
Vue框架提供了一些便捷的数组变异方法，包括push、pop、shift、unshift、splice、sort和reverse等，Vue的数组变异方法可以自动触发DOM更新，本文就详细带大家了解一下Vue.js数组的变异方法2023-06-06
下面小编就为大家分享一篇解决vue-cli创建项目的loader问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看看吧2018-03-03
vue serve及其与vue-cli-service serve之间的关系解读
这篇文章主要介绍了vue serve及其与vue-cli-service serve之间的关系,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue3 封装 element-plus 图标选择器实现步骤
这篇文章主要介绍了Vue3 封装 element-plus 图标选择器,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
最近学习了Vue3,利用vue3做了个好玩的项目,所以下面这篇文章主要给大家介绍了关于如何利用Vue3模仿Windows窗口的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
点击左侧的菜单可以切换不同的看板,有些看板页面中的报表比较多,用户多次切换后页面的内存占用可以上升为GB级,严重时导致页面内存溢出,使得页面崩溃,极大影响了用户体验,本文给大家介绍Vue + Echarts页面内存占用高的问题解决方案,感兴趣的朋友一起看看吧2024-02-02
element-ui 远程搜索组件el-select在项目中组件化的实现代码
这篇文章主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了vue cli3 实现分环境打包的步骤，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03
最新评论