如何解决为什么图像不显示在浏览器同步上?
我试图在 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 举报,一经查实,本站将立刻删除。