ブートストラップカルーセルに画像が表示されない

画像はブートストラップカルーセルに表示されません。また、クラスを使用して画像を表示するだけでも画像は表示されません。私はブートストラップを使って表現しています。イメージフォルダへの経路を含めていることを二重に確認しましたが、問題の原因はまだ分かりません。ブートストラップカルーセルに画像が表示されない

ここに、私がブートストラップカルーセルで問題が発生している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を使ってみましたが、どちらもうまくいきませんでした。私は画像を画像フォルダに入れて、画像/ pic1.pngを使ってみましたが、その作業はありませんでした。私は/images/pic1.pngとまた../images/pic1.pngを試しました。私はここの問題が何であるか分かりません。ありがとうございました。

出典

2017-11-15 Teastruction

すべてのHTMLはビューにあり、画像は画像にあります。

変化にギャラリーの画像SRC：（あなたはpath.joinパスモジュールを必要と使用している場合）あなたはIMGファイル用のハンドラを追加する必要があります<img src="/images/Sketch.png"....

は要求されました。

これを行う方法の1つは、express.static関数を使用することです。これを使用すると、uriの/ imagesを含むすべての要求を特定のディレクトリで探すことができます。次のハンドラ。あなたは（あなたがノードを実行しているディレクトリからの相対）指定されたディレクトリからすべての静的ファイルを提供することができますexpress.static使用

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.'); 
    });

、/この場合の画像。

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

出典

2017-11-15 19:00:33

パスモジュールを必要とするときに、私は=（ 'パス'）を必要と VARパスを使用します。次に、を追加します。path = __dirname + '/ views /'; – Teastruction

パスモジュールのパス変数を使用し、パスに別の名前を付けてください –

私は上記を試しましたが、まだ画像のaltタグだけが表示されています。私のディレクトリは、この -Project
-website.js
-package.json
-views
-index.html
-gallery.html
-display.html
- 約ように設定されています。 HTML
-node_modules
-images
-pic1.jpg – Teastruction

ブートストラップカルーセルに画像が表示されない

答えて

関連する問題