vite+ts 引入图片使用动态路径

 前段时间遇到一个小问题，是这样的，当我想在vite 里引入静态资源的时候在官网看到有如下方法：

 按照官网的例子我就写了这样一个函数，但是这是我试了几次才发现有些小地方需要注意。

function getImageCssUrl(name?: string) {
    const url = new URL(`../../../assets/${name}`, import.meta.url).href
    console.log(url)
    return `url(${url})`
}

 1.new URL() 的第一个参数代表的是资源相对于当前模块的相对路径。

有俩个地方需要注意：

第一个是相对当前模块的路径，也就是说在不同路径下的vue文件中引用时，第一个参数是不同的，记住是相对路径，不是绝对路径，不要再加什么@来替换了。

第二个是该路径可以是动态的，但是有前提，必须包含至少一个显式目录，

例如：

const url = new URL(`../../../${name}`, import.meta.url).href  是错误的

而

const url = new URL(`../../../assets/${name}`, import.meta.url).href 
才是正确的，注意必须到assets/ 而不是只到assets就开始替换了 

这样也是错误的：即时你的name 将‘/’补充上了

const url = new URL(`../../../assets${name}`, import.meta.url).href