为什么图像不显示在浏览器同步上？

编程问答 2022-05-21

问题描述

我试图在 html 中显示图像，但浏览器同步没有在本地主机上显示图像。

此外，当我手动或使用 vscode 实时服务器打开我的 index.html 文件时，会显示图像。

这是我的 gulpfile.js 的一部分。如果您想查看全部click here

gulp.task('htmlmin',() => {
    return gulp.src('./src/index.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest("./build"))
})

gulp.task('browsersync',() => {
    browserSync.init({
        server: {
            baseDir: './build/'
        }
    })

    gulp.watch('./src/index.html').on('change',reload);

    gulp.watch(['./src/style.css'],gulp.series('style'));
    gulp.watch(['./src/index.js'],gulp.series('javascript'));
    gulp.watch(['./src/index.html'],gulp.series('htmlmin'));
});

index.html

<!doctype html>
<html lang="en">

<head>
    <!-- required Meta tags -->
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1">

    <!-- Custom css-->
    <link rel="stylesheet" href="./style.css">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <script src="./index.js" defer></script>

    <link rel='shortcut icon' type='image/x-icon' href='../images/favicon.ico'>

    <title>Messium</title>
</head>

<body>
     
    <img src="../images/cheef.jpg" alt="cheef and kitchen" id="hero-image" class="">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJfdroafW"
        crossorigin="anonymous"></script>
</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

browser-syncgulpgulphtmljavascriptnpmnpmnpm