CSS背景图片路径解析错误：本地打开页面图片无法加载

问题现象 #

• 在IntelliJ中直接启动页面，背景图片可正常加载；但直接打开本地HTML文件时，图片加载失败
• 使用../开头的路径时，会触发“couldn't resolve file”错误，此时即便在IntelliJ中启动页面，图片也无法加载

原始及尝试过的代码 #

原始CSS代码：

background: url("/images/productos/lat1.jpg") no-repeat
            center center/cover;

尝试过的写法：

background: URL("../images/productos/lat1.jpg") no-repeat
            center center/cover;

background: url(/images/productos/lat1.jpg) no-repeat
            center center/cover;

background: URL(../images/productos/lat1.jpg) no-repeat
            center center/cover;

生效的解决方案 #

最终以下写法可同时适配本地打开和IntelliJ启动场景：

background: URL("../../images/productos/lat1.jpg") no-repeat
            center center/cover;

原因说明 #

路径加载的基准差异是核心问题：

• IntelliJ启动项目时，会以项目根目录作为路径基准，所以/images/...这类绝对路径（相对项目根）能正确定位图片
• 直接打开本地HTML文件时，浏览器会以该HTML文件所在的文件夹作为路径基准，此时/会指向本地磁盘的根目录（比如C:/），自然找不到项目里的图片；而../的层级数如果不对，也会定位到错误的目录，导致无法解析文件

你最终使用的../../images/...是根据CSS文件到图片所在目录的实际层级设置的相对路径，既符合本地文件的路径基准，也能被IntelliJ识别，所以两种场景下都能正常加载图片。

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