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
}

 

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