CSS的background-image属性不生效，报Not allowed to load local resource错误如何解决？

报错Not allowed to load local resource和CSS路径写法无关，是浏览器的本地文件安全限制导致的：你直接双击打开本地HTML文件时，浏览器使用file://协议加载页面，默认禁止页面跨本地路径加载静态资源，所以即使路径正确也无法加载图片。背景色可以正常显示，说明CSS文件本身已经被正确引用，排除CSS加载失败的问题。

先确认正确的路径写法 #

你的项目结构如下：

website/
├─ index.html
├─ style.css
└─ images/
   └─ logo.png

style.css和images文件夹为同级目录，所以正确的背景图路径写法为：

header .logo {
    width: 45px;
    height: 40px;
    /* 以下两种写法都生效 */
    background-image: url('images/logo.png');
    /* 或者 background-image: url('./images/logo.png'); */
}

具体解决方法 #

方法1：使用本地静态服务启动项目（推荐） #

通过本地静态服务走http://协议访问页面，即可绕过本地文件安全限制，这是最常用的本地开发方案，可选实现方式：

• VS Code用户：安装「Live Server」插件，右键index.html选择Open with Live Server即可自动启动服务并打开页面
• Node.js环境：在website目录下打开终端，执行npx serve，访问终端输出的本地服务地址即可
• Python环境：在website目录下打开终端，Python3执行python -m http.server，Python2执行python -m SimpleHTTPServer，访问http://localhost:8000即可

方法2：调整浏览器安全配置（仅适合临时测试，不推荐） #

如果必须使用file://协议打开本地文件，可以修改浏览器启动参数关闭本地资源访问限制，以Chrome为例：

1. 右键Chrome桌面快捷方式，选择「属性」
2. 在「目标」输入框的原有内容末尾，添加空格加--allow-file-access-from-files参数
3. 关闭所有已经打开的Chrome进程，通过修改后的快捷方式启动Chrome，再访问本地HTML文件即可

该问题在项目部署到线上服务器后会自动消失，线上环境默认使用http/https协议，不存在本地文件访问限制。

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