new URL传入的参数使用变量为什么会失败

Question

new URL第一个参数我直接传入字符串，能输出正确的图片路径，为什么传入拼接字符串或者变量后输出的不是预期结果？

Answer 1

你在 new URL 构造函数中传入的第一个参数字符串。URL 构造函数是一个绝对或相对URL，而不是文件系统的相对路径。当你直接传入字符串时，它可能被解释为相对路径或具体字符串。
假设你的图片文件 home.png 存储在模块所在目录的 assets/tabbar 子目录下，你可以这样构造URL：

const onGetImgUrl = (iconName) => {
    let src = new URL(`./assets/tabbar/${iconName}.png`, import.meta.url).href;
    console.log("src: ", src);
    return src;
}