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.js虽然说是数据驱动页面的，但是有时候我们也要获取dom对象进行一些操作。这篇文章主要给大家介绍了关于vue第一次获取不到元素的解决方法，需要的朋友可以参考下2021-06-06
这篇文章主要介绍了Element UI框架中巧用树选择器的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了vue中echarts3.0自适应，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到2022-09-09
这篇文章主要为大家介绍了Vue不能watch数组和对象变化解决方案示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
Vue3调度器错误解析完美解决Unhandled error during executi
最近开发时在Vue3项目中看到控制台出现 “Unhandled error during execution of scheduler flush. This is likely a Vue internals bug”这个警告,下面给大家介绍Vue3调度器错误解析,完美解决Unhandled error during execution of scheduler flush的问题,一起看看吧2025-04-04
Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决
这篇文章主要介绍了Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue-router路由模式详解(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了Vue的组件,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
webpack 3 + Vue2 使用dotenv配置多环境的步骤
这篇文章主要介绍了webpack 3 + Vue2 使用dotenv配置多环境,env文件在配置文件都可以用, vue页面用的时候需要在 webpack.base.conf.js 重新配置,需要的朋友可以参考下2023-11-11
最新评论