在vite环境中动态导入静态资源

背景

现在有一个场景，有很多的选项卡，点击不同选项卡实现图片的切换。

当我们动态的切换图片url时，会发现图片找不到，报404.

原因

在vite项目中，运行的时候，其实是打包后的代码，所以，图片需要的是打包后的图片路径。

vite在一些情况下会自动转喊路径

css中的静态路径
img中的src（静态路径）

所以我们希望vite帮我们自动转化路径

解决办法

放public目录中
那么它打包后的路径和打包前的路径是一样的，缺点是打包后的文件名丢失了文件指纹。

使用import函数

这个vite也会自动转化。

这种方法打包后会产生额外的js文件（用于转化路径的），增加网络请求。

使用new URL() + import.meta.url

const imgUrl = ref()
const tabs = (path: any)=> {
  imgUrl.value = new URL(`../../assets/img/${path}.jpg`, import.meta.url)
}

mport.meta.url，它用作基准 URL。基准 URL 决定了如何解析第一个参数中的相对路径。import.meta.url 表示当前模块的 URL，因此它将用作基准 URL。