Vue3中如何正确设置background-image为@/assets下的图片路径？

Question

在Vue3项目中，如何正确设置`background-image`为`@/assets`下的图片路径？这是开发者常遇到的问题。通常情况下，直接在CSS中使用`background-image: url('@/assets/image.png')`可能会导致路径解析失败，因为Webpack无法识别`@`别名。 **常见问题：** - 使用`@`别名时，CSS无法正确解析路径。 - 图片资源未被打包或生成正确的相对路径。 **解决方法：** 1. 在 `<style>` 中改用 `~@` 语法：`background-image: url(~@/assets/image.png);` 2. 使用内联样式绑定：`

` 3. 确保 `vue.config.js` 配置了别名（如需）：`resolve: { alias: { '@': path.resolve(__dirname, 'src') } }` 注意：方法选择取决于场景需求，动态路径推荐使用内联样式绑定。</style>