Images won't show up on Bootstrap Carousel
Question
The images won't show up on my bootstrap carousel or when I just use the class to display the picture by itself. I am using bootstrap and express. I have double checked that I am including the pathway to the image folder and I still do not know what is causing the issue.
Here is the index.html code where I am having the issue with the bootstrap carousel.
<!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>
Here is the page where I just try to use the picture by itself, my gallery.html file.
<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>
And I am not sure if this is needed, but here is my website.js file in case.
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.');
});
So I have tried using .png and .jpg, neither worked. I have tried putting the images in an images folder and using images/pic1.png and that didnt work. I have tried /images/pic1.png and also ../images/pic1.png. I am not sure what the issue here is. Thank you.
1 answers
solution1
0 ACCPTED 2017-11-15 19:00:33
All html's are in views, images are in images.
change the image src in the gallery to: <img src="/images/Sketch.png"....
You should add an handler for the img files requested (if you are using path.join require the path module).
one way of doing it is with the express.static function, by using it you are telling express to look for all of the requests with /images in the uri, in a specific directory, if not found it will proceed to the next handler.
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.');
});
using express.static you can serve all static files from a given directory(relative to the directory from which you are running node), /images in this case.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.