图片不会显示在Bootstrap Carousel上
[英]Images won't show up on Bootstrap Carousel
问题描述
这些图像不会显示在我的自举轮播中，或者仅当我使用课程自行显示图片时才显示。 我正在使用引导和表达。 我已经仔细检查过我是否包含通往图像文件夹的路径，但我仍然不知道是什么引起了该问题。
这是index.html代码，我在其中遇到了引导轮播问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample website using Bootstrap and Express</title>
<!---CDN LINKS-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="website.js"></script>
</head>
<body>
<div>
<div>
<nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home<span class="sr-only">(current)</span></a></li>
<li><a href="/gallery">Gallery</a></li>
<li><a href="/display">Display</a></li>
<li><a href="/about">About us</a></li>
</ul>
</nav>
</div>
<br/>
<div class="jumbotron"> <p>
This is a place for some sample contant.
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/pic1.png" alt="Picture 1">
<div class="carousel-caption">
<h3>Picture 1</h3>
<p>Add text here.</p>
</div>
</div>
<div class="item">
<img src="images/pic1.png" alt="Picture 2">
<div class="carousel-caption">
<h3>Picture 2</h3>
<p>Sample text.</p>
</div>
</div>
<div class="item">
<img src="images/pic1.png" alt="Picture 3">
<div class="carousel-caption">
<h3>Picture 3</h3>
<p>Sample text.</p>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
这是我尝试单独使用图片的页面，即我的gallery.html文件。
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div>
<div>
<nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li class="active"><a href="/gallery">Gallery<span class="sr-only">(current)</span></a></li>
<li><a href="/display">Display</a></li>
<li><a href="/about">About us</a></li>
</ul>
</nav>
</div>
<br/>
<div class="jumbotron">
<p>
Put the gallery details here.
</p>
</div>
<div class="container">
<h2>Image</h2>
<img src="Sketch.png" class="img-rounded" alt="Sample Picture" width="304" height="236">
</div>
</div>
</body>
<html>
而且我不确定是否需要这样做，但是这是我的website.js文件，以防万一。
var express = require('express');
var app = express();
var router = express.Router();
var path = __dirname + '/views/';
app.set('port', 8070);
app.use('/', router);
router.get('/', function(req, res){
res.sendFile(path + 'index.html');
});
router.get('/gallery', function(req, res){
res.sendFile(path + 'gallery.html');
});
router.get('/display', function(req, res){
res.sendFile(path + 'display.html');
});
router.get('/about', function(req, res){
res.sendFile(path + 'about.html');
});
app.use('*', function(req, res){
res.send('Error 404: Not Found!');
});
app.listen(app.get('port'), function(){
console.log('Express started on http://localhost:' + app.get('port') + ': press Ctrl-C to terminate.');
});
因此，我尝试使用.png和.jpg，但均无效。 我试图将图像放在图像文件夹中，并使用images / pic1.png，但这没有用。 我尝试过/images/pic1.png以及../images/pic1.png。 我不确定这里的问题是什么。 谢谢。
1 个解决方案
解决方案1
0 已采纳 2017-11-15 19:00:33
所有的html在视图中，图像在图像中。
将图库中的图像src更改为： <img src="/images/Sketch.png"....
您应该为请求的img文件添加一个处理程序（如果使用path.join，则需要path模块）。
一种实现方法是使用express.static函数，通过使用它，您告诉Express在特定目录中的uri中查找带有/ images的所有请求，如果找不到，它将继续进行下一个处理程序。
var express = require('express');
var app = express();
var router = express.Router();
var path = require('path');
var viewsPath = path.join(__dirname, 'views');
app.set('port', 8070);
//assuming that the images are in the 'images' directory
app.use('/images' ,express.static('images'));
app.use('/', router);
router.get('/', function(req, res){
res.sendFile(path.join(viewsPath,'index.html'));
});
router.get('/gallery', function(req, res){
res.sendFile(path.join(viewsPath, 'gallery.html'));
});
router.get('/display', function(req, res){
res.sendFile(path.join(viewsPath, 'display.html'));
});
router.get('/about', function(req, res){
res.sendFile(path.join(viewsPath, 'about.html'));
});
app.use('*', function(req, res){
res.send('Error 404: Not Found!');
});
app.listen(app.get('port'), function(){
console.log('Express started on http://localhost:' + app.get('port') + ': press Ctrl-C to terminate.');
});
使用express.static，您可以提供给定目录（相对于运行节点的目录）中的所有静态文件，在这种情况下为/ images。
(HTML + JavaScript + BootStrap) 带有删除按钮的表格不会显示
[英](HTML + JavaScript + BootStrap) Table With Delete Button Won't Show up
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.