【踩坑记】css background 相对地址拼接

484 阅读1分钟

css 文件中使用相对路径引入图片,部署时,如果 css 的域名和 html 域名不同,此时 css 图片中拼接的是 css 的域名,而不是 html 的域名

开发的时候,有时我们在 css 中会这么写 background: url('/img/test.png') 为元素添加背景图片,项目打包后将所有的静态资源 css、js、img 上传到 cdn,例如域名为 www.cdn.com。

如果我们的项目域名为 www.main.com;我们访问 www.main.com 域名获取 html 文件,然后加载 css 文件,注意此时请求 css 的地址是 www.cdn.com/css/test.cs…。css 文件加载完毕后会加载 background: url('/img/test.png')  引用的图片,浏览器会给图片的相对地址前面拼接 cdn 的域名 而不是项目的域名,即加载图片的地址是 www.cdn.com/img/test.pn… 而不是www.main.com/img/test.pn…