帶 Django 的 Bootstrap4 多幻燈片旋轉木馬

Question

我正在嘗試使用 Django 和 Bootstrap 構建動態多幻燈片輪播。

按照此處列出的說明，我構建了以下內容，但 html 存在問題，因為來自 model 的數據未呈現在屏幕上。 （我確信這是下面的問題，因為我在頁面上有另一個類似的輪播，效果很好）。

模板.html：

      <div class="container"> 
        <div id="modelCarousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            {% for modelInstance in modelData %}
            {% if forloop.first %}
            <li data-target="#modelCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#modelCarousel" data-slide-to="1"></li>
            <li data-target="#modelCarousel" data-slide-to="2"></li>
            {% endif %}
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <img data-src="{{ model.image }}">
            </div>
          </div>
          {% endfor %}
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="icon-prev" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="icon-next" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

謝謝！

Answer 1

最簡單的解釋方法：

                     {% for modelInstance in modelData %}
          <img data-src="{{ model.image }}">