Изображение в django не работает

Я использую карусель в бутстрапеИзображение в django не работает

Я сделал две версии.

Первый - это статический файл html.

Другой в рамках 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>

----------------------- Джанго код ------- ------------------------------

 <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>

Следующий код части jjano, отличается на изображении формат

Другие коды одинаковые

Но результат в 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 не работает

ответ

Смежные вопросы