How to solve image display issue using gulp and browsersync?

Question

css

I am using Galp and when converting a sass file to css, BrowserSync does not show images added via background-image. However, if you open the html file directly, the pictures are displayed. What could be the problem? Contents of the gallpfile:

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)
);