圖片不會顯示在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.