[Vue3]动态引入图片

背景

需要动态引入background-image，如果在css中静态写入的话没有问题，但是使用变量动态引入，由于vite打包后，无法找到路径

静态资源

项目中需要使用的图片等静态资源一般存放在src/assets文件夹下。background-image使用url方式引入，如果动态引入的话需要使用import、new URL(url, import.meta.url)这样的方式。

const getAssetsFile = (url: string) => {
  return new URL(`../assets/images/${url}`, import.meta.url).href;
};

而在html中使用动态style引入

<div style={{ backgroundImage: `url(${getAssetsFile('Image.png')})` }}></div>

即可实现资源的动态引入。

使用绝对路径

这里也可以使用绝对路径，以 / 作为开头，就是绝对路径。例如资源在src/assets/images下：

new URL(`/src/assets/images/${url}`, import.meta.url).href;