Как решить проблему отображения картинок с использование gulp и browsersync?

Question

[iMurser]

Использую Галп и при преобразование sass-файла в css, BrowserSync не показывает картинки, добавленные через background-image. Однако, если открыть html-файл напрямую, то картинки отображаются. В чем может быть проблема? Содержание галпфайла:

const { src, dest, parallel, watch, series } = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();


function browser() {
    browserSync.init({
        server: {
            baseDir: "src"
        },
        notify: false,
    })
}

function watchFiles() {
    watch("src/css", css);
    watch("src/*.html").on('change', browserSync.reload);
}

function css() {
    return src("src/sass/**/*.scss")
        .pipe(sass())
        .pipe(dest("src/css"))
        .pipe(browserSync.stream());
}

exports.css = css;
exports.default = series(
    series(css), 
    parallel(browser, watchFiles)
);

Comments

[Ankhena]

Откройте инструменты разработчика, вкладку Console и посмотрите пути, по которым ищется картинка.

[iMurser]

Ankhena, спасибо. Ошибка была элементарна, что аж стыдно. BrowserSync сервер папки src, в которую входили css, sass и html папки. А папка с картинками находилась за папкой src, и при создании локального сервера просто-напросто не понимал, что за путь картинки я указываю. Переместив папку img в папку src, проблема решилась!