图片不会显示在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. 这是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>

Here is the page where I just try to use the picture by itself, my gallery.html file. 这是我尝试单独使用图片的页面，即我的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>

And I am not sure if this is needed, but here is my website.js file in case. 而且我不确定是否需要这样做，但是这是我的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.');
});

So I have tried using .png and .jpg, neither worked. 因此，我尝试使用.png和.jpg，但均无效。 I have tried putting the images in an images folder and using images/pic1.png and that didnt work. 我试图将图像放在图像文件夹中，并使用images / pic1.png，但这没有用。 I have tried /images/pic1.png and also ../images/pic1.png. 我尝试过/images/pic1.png以及../images/pic1.png。 I am not sure what the issue here is. 我不确定这里的问题是什么。 Thank you. 谢谢。

Answer 1

All html's are in views, images are in images. 所有的html在视图中，图像在图像中。

change the image src in the gallery to: <img src="/images/Sketch.png".... 将图库中的图像src更改为： <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). 您应该为请求的img文件添加一个处理程序（如果使用path.join，则需要path模块）。

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. 一种实现方法是使用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.');
  });

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. 使用express.static，您可以提供给定目录（相对于运行节点的目录）中的所有静态文件，在这种情况下为/ images。

https://expressjs.com/en/starter/static-files.html https://expressjs.com/cn/starter/static-files.html

图片不会显示在Bootstrap Carousel上

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-11-15 19:00:33

图片不会显示在Bootstrap Carousel上

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-11-15 19:00:33

解决方案1
0 已采纳 2017-11-15 19:00:33