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总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了基于element日历组件实现签卡记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了详解使用vue实现tab操作,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
在Vue项目中使用v-if指令控制ECharts图表显示时,可能会遇到图表无法正常渲染或显示错误的问题,下面这篇文章主要介绍了Vue中使用ECharts与v-if的问题和解决方案,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue项目内存溢出问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
Vue3 中一个组件从创建到挂在,会经过3个重点步骤：创建组件实例,设置组件实例,创建并执行带副作用的渲染函数,本文将着重讲清 创建组件实例、设置组件实例 这两个过程都做了什么,这部分逻辑很简单,但你会从中学习到 Vue 优秀的实践技巧,需要的朋友可以参考下2024-07-07
在 Vue 3 中,组件化开发成为了我们提升前端开发效率的利器,其中,样式的管理也是一个至关重要的部分,在 Vue 中,我们会经常使用两种样式作用域：Scoped 样式和 Global 样式,本文将通过示例代码来介绍Vue3如何进行样式Scoped和Global的设置,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了 解决Vue打包后访问图片/图标不显示的问题，本文给大家介绍的非常详细，具有一定的参考解决价值,需要的朋友可以参考下2019-07-07
项目上有一个需求,页面上有50、60个数据变量,是依次排序递增的变量,中间有个别变量用不到,不想把这些变量直接定义在data() { }内,这篇文章主要介绍了vue生成初始化名字相近的变量并放到数组中的示例代码,需要的朋友可以参考下2024-08-08
这篇文章主要给大家介绍了关于Vue实现关联页面多级跳转（页面下钻）功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
本文通过实例代码给大家介绍了Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
最新评论