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;

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。