vite创建的项目如何实现动态的获取图片
更新时间：2026年02月17日 11:56:19 作者：m0_60827885
在Vite项目中动态获取图片,可以创建一个函数,返回`new URL()`的href,传入图片地址和`import.meta.url`,然后将该函数抽离为公共方法,在定义数据时,去掉路径即可使用
vite创建的项目动态的获取图片
在使用weabpack的项目中动态的获取图片可以采用：
但是使用vite创建的项目，require是无效的。需要通过下面的方法来动态获取图片
1、创建一个函数
函数的参数为你的图片名字
2、return一个newURL().href
传入两个参数。第一个参数是你的图片（img）的地址，第二个参数是import.meta.url
3、将这个函数抽离为公共方法
4、就可以引入后使用了
//函数的代码
export const getImgUrl =(img)=>{
return new URL(`../../assets/img/${img}`, import.meta.url).href
}
路径的问题：
就是在函数中第一个参数写了图片的路径，所以在我们定义的数据里就要删了路径就行了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中的reactive函数,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了Vue.js实现日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本篇文章主要介绍了vue之页面缓存问题(基于2.0)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要介绍了vue实现歌手列表字母排序，下拉滚动条侧栏排序实时更新,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
Vant是一个强大的移动端组件库,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要为大家介绍vue3中的vant组件引入使用的方法,希望对大家有所帮助2023-10-10
这篇文章主要介绍了vue中使用loadsh的debounce防抖函数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最近写vue的一个练手项目需要在里面实现一个轮播图,想到去用第三方插件,百度了一轮,发现大部分都是swiper这个插件,这篇文章主要给大家介绍了关于vue2使用swiper4踩坑的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要为大家介绍了一款不用跑项目的vscode组件所见即所得效果的使用方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要为大家详细介绍了vue3.0+echarts实现立体柱图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-09-09
在本文中，我们学习了如何使用 Intersection Observer API 和 defineAsyncComponent 函数在 Vue 组件可见时对其进行懒加载，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友一起看看吧2023-09-09
最新评论