在Django中的圖像不起作用

我做了兩個版本。

一個是html靜態文件。

另一種是Django框架，

但我不能使用Django做以下結果。

以下是html靜態文件。

<! DOCTYPE html> 
<html > 
<head lang="zh-Hant-TW"> 
<title></title> 
<meta name="viewport" content="width=device-width ,initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head> 
    <body> 
     <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
       <div class="panel panel-warning"> 
        <div class="panel-heading">Most Popular Products</div> 
        <div class="panel-body"> 
         <div id="bestSellers" class="carousel slide" data-ride="carousel"> 
          <ol class="carousel-indicators"> 
           <li data-target="#bestSellers" data-slide-to="0" class="active"></li> 
           <li data-target="#bestSellers" data-slide-to="1"></li> 
           <li data-target="#bestSellers" data-slide-to="2"></li> 
           <li data-target="#bestSellers" data-slide-to="3"></li> 
          </ol> 

          <div class="carousel-inner"> 
           <div class="item active"> 
            <img src="images/spring.jpg" alt="First slide" class="img-responsive"> 
            <div class="carousel-caption">Product 1</div> 
           </div> 
           <div class="item"> 
            <img src="images/summer.jpg" alt="First slide" class="img-responsive"> 
            <div class="carousel-caption">Product 2</div> 
           </div> 
           <div class="item"> 
            <img src="images/autumn.jpg" alt="First slide" class="img-responsive"> 
            <div class="carousel-caption">Product 3</div> 
           </div> 
           <div class="item"> 
            <img src="images/winter.jpg" alt="First slide" class="img-responsive"> 
            <div class="carousel-caption">Product 4</div> 
           </div> 
          </div> 

          <a class="left carousel-control" href="#bestSellers" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left"></span> 
          </a> 
          <a class="right carousel-control" href="#bestSellers" data-slide="next"> 
           <span class="glyphicon glyphicon-chevron-right"></span> 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 













     <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
       <div class="panel panel-warning"> 
        <div class="panel-heading">Weather data</div> 
        <div class="panel-body"> 
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
         <ol class="carousel-indicators"> 
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
         </ol> 
         <div class="carousel-inner" role="listbox"> 
         <div class="carousel-item active"> 
          <img src="images/spring.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 1</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/summer.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 2</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/autumn.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 3</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/winter.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 4</div> 
         </div> 
         </div> 
         <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left"></span> 
          </a> 
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
           <span class="glyphicon glyphicon-chevron-right"></span> 
          </a> 
         </div> 
        </div> 
      </div> 
     </div> 
    </body> 
</html>

----------------------- Django的代碼------- ------------------------------

 <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
       <div class="panel panel-warning"> 
        <div class="panel-heading">Weather data</div> 
        <div class="panel-body"> 
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
         <ol class="carousel-indicators"> 
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
         </ol> 
         <div class="carousel-inner" role="listbox"> 
         <div class="carousel-item active"> 
          <img src="images/spring.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 1</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/summer.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 2</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/autumn.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 3</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/winter.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 4</div> 
         </div> 
         </div> 
         <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left"></span> 
          </a> 
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
           <span class="glyphicon glyphicon-chevron-right"></span> 
          </a> 

         </div> 
        </div> 
      </div> 
     </div> 


    </body> 
</html>

以下是djano件代碼，不同之處在於圖片格式

其他代碼是一樣的

但django的結果是頁面的四個垂直圖片。

我該如何解決？

來源

2016-12-25 Jonathan Cheng

你需要通過使用靜態文件的tutorial。

總之你需要使用src="{% static url '(path)/(name).(format)" %}"

在模板的頂部，你還需要{% load staticfiles %}，並有你的靜態路徑設置課程+ URL配置的正確。

來源

2016-12-25 19:01:22 Pythonista

是的，我實際上添加在我的本地文件，sry我忘了添加在我的問題haha.btw問題依然存在 –

在Django中的圖像不起作用

回答

相關問題