Chrome提示“not allowed to load local resource”，BrowserSync加载图片失败求助

这个问题我之前也碰到过，本质是运行环境的差异导致的：直接双击打开index.html是用file://本地文件协议，而BrowserSync启动的是一个HTTP服务器（比如http://localhost:3000），浏览器对这两种环境下的资源加载规则完全不同。当你的图片路径是本地绝对路径或者相对路径没配对时，HTTP服务器环境下的浏览器会出于安全限制阻止加载本地资源。

下面是具体的解决步骤，结合你的gulp配置来调整：

1. 先检查图片引用路径是否正确 #

首先确保HTML/CSS里的图片路径是相对路径，而且是基于项目根目录（也就是BrowserSync启动的根目录）的。举个例子，如果你的项目结构是这样：

你的项目文件夹/
├── gulpfile.js
├── index.html
└── img/
    └── background.jpg

那CSS里的背景图路径应该写成：

background-image: url('img/background.jpg');

或者带当前目录标识的：

background-image: url('./img/background.jpg');

绝对不要用C:/xxx/background.jpg这种本地磁盘绝对路径，也别写file://开头的路径。

2. 配置BrowserSync的正确根目录 #

在你的gulpfile.js里，一定要给BrowserSync指定正确的服务器根目录，这样它才能正确解析所有相对路径。比如：

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: './' // 这里填index.html所在的文件夹路径，比如项目根目录就写'./'
    }
  });

  // 监听文件变化自动刷新
  gulp.watch('*.html').on('change', browserSync.reload);
  gulp.watch('css/*.css').on('change', browserSync.reload);
});

如果你的index.html是放在src文件夹里的，那baseDir就改成./src就行。

3. 如果有构建流程，确保图片被同步到目标目录 #

要是你的项目有打包构建步骤（比如把src里的文件编译到dist文件夹），别忘了把图片也复制到dist目录，同时让BrowserSync指向dist作为根目录。可以加个复制图片的gulp任务：

// 复制图片到dist目录
gulp.task('copy-images', function() {
  return gulp.src('src/img/**/*') // 匹配src/img下所有文件和子文件夹
    .pipe(gulp.dest('dist/img')); // 输出到dist/img
});

// 启动服务器前先复制图片，同时监听图片变化
gulp.task('serve', gulp.series('copy-images', function() {
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });

  // 图片变化时重新复制并刷新页面
  gulp.watch('src/img/**/*', gulp.series('copy-images', browserSync.reload));
  // 其他文件的监听任务...
}));

4. 最后排查小细节 #

• 强制刷新浏览器（Ctrl+Shift+R），有时候缓存会导致路径解析异常；
• 检查图片文件名和路径的拼写，注意大小写（虽然Windows不区分，但服务器环境可能会严格区分）。

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