Question

这些图像不会出现在我的引导转盘上，或者当我只是使用该类来显示图片时。我正在使用bootstrap和express。我已经仔细检查了我是否包含了到图像文件夹的路径，但我仍然不知道是什么导致了这个问题。

这是index.html代码，我遇到了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>

这是我尝试单独使用图片的页面，我的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。我不确定这里的问题是什么。谢谢。

Answer 1

所有html都在视图中，图像在图像中。

将图库中的图片src更改为：<img src="/images/Sketch.png"....

您应该为请求的img文件添加处理程序（如果您使用的是path.join，则需要路径模块。）

这样做的一种方法是使用express.static函数，通过使用它，你告诉express要在uri中查找所有请求，在特定目录中，如果没有找到，它将继续执行下一个处理程序。

   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。

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

图像不会出现在Bootstrap Carousel上

1 个答案: