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 spa应用中的路由缓存问题与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要给大家介绍了关于vue3.0 sfc中setup变化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
这篇文章主要为大家介绍了JavaScript获取echart曲线上任意点位的值详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
下面小编就为大家分享一篇vue进行图片的预加载watch用法实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
关于vue项目中会出现一些需求,就是右键菜单项的功能实现,下面这篇文章主要给大家介绍了关于vue封装一个右键菜单组件(复制粘贴即可使用)的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue指令之v-for的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue中的ESLint配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家详细介绍了vue实现移动端原生小球滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue如何根据不同的环境使用不同的接口地址问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这篇文章主要介绍了vuex与组件联合使用的方法,需要的朋友可以参考下2018-05-05
最新评论