Browser-sync of gulp cannot load external material?

  node.js, question

HTML code is simple

<!  DOCTYPE html>
 <html>
 <head>
 < title > test < /title >
 <meta charset="utf-8" />
 <link rel="stylesheet" href="./styles/main.css" />
 </head>
 <body>
 <img src="./images/1.jpg" />
 </body>
 </html>

Gulpfile.js inside’s code is also very simple

var gulp = require('gulp');
 var browserSync = require('browser-sync');
 
 gulp.task('browser-sync', function() {
 browserSync({
 server: {
 baseDir: '..'
 bracket
 });
 });
 
 gulp.task('default', ['browser-sync']);

But the picture can’t be loaded!

clipboard.png

The problem of the reference path of the picture has been eliminated, because I double-clicked to open the html file, and the picture is normally displayed. Only by opening the page through gulp can this problem occur, not only pictures but also css files imported from outside can’t be loaded. What’s going on? What code is missing and not written?
Thank you ~

Personally, I feel that it is a problem with the baseDir setting in your browserSync. I am not sure about your directory structure, so you can try to change it.