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总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3内置组件Teleport使用方法，Teleport是Vue 3.0 新增的一个内置组件，主要是为了解决一些特殊场景下模态对话框组件、组件的渲染，带着些许的了解一起走进下面文章的详细内容吧2021-10-10
vue-router中的hash和history两种模式的区别
大家都知道vue-router有两种模式，hash模式和history模式，这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧2018-07-07
Vue3动态路由(响应式带参数的路由)变更页面不刷新的问题解决办法
问题来源是因为我的开源项目Maple-Boot项目的网站前端,因为项目主打的内容发布展示,所以其中的内容列表页会根据不同的菜单进行渲染不同的路由,本文降介绍Vue3动态路由变更页面不刷新的问题解决办法,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue直接打开public(本地)文件下的pdf文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇vue 解决异步数据更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue使用H5的audio标签问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家详细介绍了Vue如何结合echarts实现水滴图的绘制，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-07-07
这篇文章主要介绍了Vue-cli3.x + axios 跨域方案踩坑指北，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
笔者这篇文章会从vue3基础的知识点开始剖析，特别是在将composition API的时候，在代码示例中不会一上来就使用setup语法糖，而是用早期的setup函数，这样方便于初学的小伙伴们理解跟学习2022-08-08
这篇文章主要介绍了Vue3封装 Message消息提示实例函数,具有一定的实用价值,需要的朋友可以参考下，希望能够给你带来帮助2021-09-09
最新评论