Python / Django / Bootstrap - 如何通过网站管理面板将图像添加到bootstrap轮播?

时间:2016-02-11 08:18:55

标签: python html django twitter-bootstrap bootstrap-carousel

我有以下问题:

现在我有一个带有3张图像的静态自举旋转木马。主要想法是添加一个允许通过网站管理面板更改这些图像的应用程序。现在我有:

model.py

class BGImagesModel(models.Model):
    image1 = models.ImageField(upload_to='images/%Y/%m/%d')
    image2 = models.ImageField(upload_to='images/%Y/%m/%d')
    image3 = models.ImageField(upload_to='images/%Y/%m/%d')

admin.py

class BGImagesAdmin(admin.ModelAdmin):
    list_display = ['image1', 'image2', 'image3']

admin.site.register(BGImagesModel, BGImagesAdmin)

url.py

urlpatterns = [
    url(r"^$", "bg_images.views.images", name="images"),
]

views.py

def images(request):
    context = {'context_images': BGImagesModel.objects.all()}
    return render(request, 'index.html', context)

.html文件如下。图像有3个主要的div:第一个,我试图通过管理面板添加图像,只是不生成任何图像。结果是 - 空。第二个和第三个(图像是硬编码的)完美地完成了它们的工作。

的index.html

        <div class="carousel-inner">

            <!-- The first background image via admin panel-->
            <div class="active item one">
                {% for image in context_images %}
                <div class="fill">
                    <div>
                        <img src="{{ image.image1.url }}" />
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- The second background image using inline CSS -->
            <div class="item two">
                <div class="fill" style="background-image:url({% static 'img/2nd.jpg' %});"></div>
            </div>

            <!-- The third background image using inline CSS -->
            <div class="item three">
                <div class="fill" style="background-image:url({% static 'img/3rd.jpg' %});"></div>
            </div>

        </div>

我试图在互联网上寻找类似主题的答案,但没有设法做到这一点。

关于问题的再一次:尝试通过网站管理面板将图像添加到引导程序轮播失败。出现空幻灯片。

我真的很感谢你的帮助!

更新

如果我将 index.html 更改为:

<!-- The first background image via admin panel-->
<div class="active item one">
    <div class="fill">
        <div>
            <img src="{{ context_images.image1.url }}" />
        </div>
    </div>
 </div>

然后我得到一个空页面,但窗口的左上角有一个破碎图像的图标。使用Firebug提供以下内容:

<div>
    <img src="">
</div>

<img src="">中没有查询集。可能是什么原因?

0 个答案:

没有答案