错误:Chrome - 不允许加载本地资源

时间:2018-04-11 17:13:10

标签: javascript node.js gulp browser-sync

到目前为止,BrowserSync的一切正常,但我加载jpg文件时遇到了一个愚蠢的问题。 Chrome控制台中出现错误"不允许加载本地资源"在gulp watch自动启动页面后,一切正常,但我无法在页面上看到我的背景图片。图像位于我项目的文件夹中。当我打开页面(双击index.html)而没有gulp watch任务时,我不会遇到这样的问题。

这是我的gulpfile.js:

var gulp = require("gulp");

var watch = require("gulp-watch");
postcss = require("gulp-postcss");
autoprefixer = require("autoprefixer");
cssvars = require("postcss-simple-vars");
nested = require("postcss-nested");
cssImport = require("postcss-import");
browserSync = require("browser-sync").create();

gulp.task('default', function() {
    console.log("yeeey!");
});

gulp.task("html", function() {
    console.log("html task");
});

gulp.task("styles", function() {
    return gulp.src("./app/assets/styles/styles.css")
        .pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
        .pipe(gulp.dest("./app/temp/styles"));
});

gulp.task("watch", function() {

    browserSync.init({
        server: {
            baseDir: "app"
        }
    });

    watch("./app/index.html", function() {
        gulp.start("html");
    });
    watch("./app/assets/styles/**/*.css", function() {
        gulp.start("styles");
    });
});

这就是我在index.html

中导航到图片的方式
<img src="C:/Users/aa/Desktop/Web-dev-course/Projects/travel-site/app/assets/images/Wietnam/v111.jpg">

感谢您的帮助!

0 个答案:

没有答案