Browser sync not connecting url links in project using gulp

Question

I have a project which I am making a workflow for, I have my project that uses gulp to watch browser changes and sass changes. The gulp file is:

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

// Compile sass to css

gulp.task('sass', function () {
    return gulp.src('./src/sass/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./public/css/'))
        .pipe(browserSync.stream());
});

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './src/static'
        }
    });
    gulp.watch('./src/sass/**/*.scss', gulp.series('sass'))
    gulp.watch('./src/static/*.html').on('change', browserSync.reload);
});

The problem is for some reason my assets are missing and when I try to link to them they don't show, error below:

my structure is:

Answer 1

I solved this by doing the following:

 browserSync.init({
        startPath:'./src/static',
        server:{
            baseDir: './'
        }
    });