Question

我有一个django项目，可以将我上传的图像放到我的应用程序文件夹中的静态文件中。我想知道是否有人可以指出我正确的方向制作一个旋转木马，当模板刷新时自动从该文件夹中获取所有图像？

更新：我已经获得了在bootstrap轮播中显示文件名的代码，但我无法获取图像。有人可以帮忙吗？我的模板的代码如下：

    {% load staticfiles %}
{% load filename %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Minimal Django File Upload Example</title> 
        <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
         <link href="http://getbootstrap.com/examples/carousel/carousel.css" rel="stylesheet">
    </head>
    <body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
    {% for document in documents %}
 <div class="item {% if forloop.first %} active {% endif %}"> 
    <div class="row">
      <div class="col">
        {{document|filename}}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
    <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>
<!-- /.carousel -->
    <!-- List of uploaded documents -->

        <!-- Upload form. Note enctype attribute! -->
        <form action="{% url 'list' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <p>{{ form.non_field_errors }}</p>
            <p>{{ form.docfile.label_tag }} {{ form.docfile.help_text }}</p>
            <p>
                {{ form.docfile.errors }}
                {{ form.docfile }}
            </p>
            <p><input type="submit" value="Upload" /></p>
        </form>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    <script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
    </body>
</html>

制作一个自动使用文件夹中所有图像的轮播

0 个答案: