Vue.js结合Laravel框架scss调用background-image失效如何解决

你遇到的报错是构建工具路径解析规则差异导致的：

• template中img标签写的images/home/wow.webp会被默认识别为站点根目录相对路径，直接对应public下的文件，因此可以正常加载
• style的scss中写的相对路径../images/home/wow.webp，会被构建工具以当前Vue组件文件的位置为基准去解析本地文件，而不是按编译后public目录的路径去查找，因此找不到对应资源抛出错误。

方案1：沿用现有public目录存放图片（适配你当前的资源结构） #

public目录下的资源属于直接对外暴露的静态资源，直接使用根路径绝对路径引用即可，不需要写相对路径：

.hero {
    height: 90vh;
    width: 100%;
    background-image: url('/images/home/wow.webp'); // 直接用/开头指向站点根目录（对应public文件夹）
}

这个方案不需要改动你现有的资源存放位置，改一行路径即可生效。

方案2：将图片放入前端资源目录交由构建工具处理 #

如果你的图片属于组件内复用的小图标、需要构建工具做压缩、哈希缓存优化，可以把图片存放到resources/js/assets/images目录下，使用构建工具别名引用：

1. 首先确认你的Laravel构建工具（Mix/Vite）已经配置了@别名指向resources/js目录（Laravel默认自带该配置）
2. scss中引用时加~前缀告知构建工具走别名解析：

background-image: url('~@/assets/images/home/wow.webp');

构建时工具会自动处理图片资源，将编译后的文件输出到public目录，自动补全正确的引用路径。

根据你的资源用途决定即可：

• 如果是大尺寸的营销图、不常修改的静态资源，直接放在public/images用方案1即可，不需要额外建文件夹
• 如果是组件复用的小图标、需要构建优化的资源，就可以在resources/js下新增assets/images文件夹存放，用方案2处理。

内容的提问来源于stack exchange，提问作者n212