vite创建的项目如何实现动态的获取图片

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
}

路径的问题：

就是在函数中第一个参数写了图片的路径，所以在我们定义的数据里就要删了路径就行了。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。