Images are not displayed on web-page (Django)

Question

the problem is this, using Bootstrap 3, created the "Carousel" from the images, then in Views wrote a loop that adds all the images with paths to the dictionary, then through the loop, output all the images in HTML-views.

---

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
    {% for picture in picture_list %}
    <div class="item active"><img src="{{ picture }}" style="width:100%;">
    </div>
    {% endfor %}
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
</a>

---

Views

def recipes_list(request):
    recipes = Recipe.objects.filter(created_date__lte=timezone.now()).order_by('created_date')
    pictures = os.listdir(os.path.join(settings.STATIC_PATH, 'images/carousel'))
    picture_list = []
    for picture in pictures:
        path = str(os.path.join(settings.STATIC_PATH, 'images\carousel').replace('\\', '/'))
        picture_list.append('%s/%s' % (path, picture))
    return render(request, 'Recipes/recipes_list.html', {'recipes': recipes, 'sub_form': sub_form, 'picture_list': picture_list})

---

In browser

<img src="C:/Users/%username%/PycharmProjects/Django/CookBook/Recipes/static/images/carousel/FRIED SAGE1.jpg" style="width:100%;">

Answer 1

Django has builtins for handling static files (and their paths). Just let it do the hard work.

settings

STATIC_URL = '/static/'
STATIC_PATH = # some path

view

def recipes_list(request):
    recipes = Recipe.objects.filter(created_date__lte=timezone.now()
                           ).order_by('created_date')
    pictures = os.listdir(os.path.join(settings.STATIC_PATH, 'images/carousel'))
    picture_list = ['images/carousel/%s' % picture
                    for picture in pictures]
    return render(request, 'Recipes/recipes_list.html', {'recipes': recipes, 'sub_form': sub_form, 'picture_list': picture_list})

template

{% load static %}
...
<div class="carousel-inner">
    {% for picture in picture_list %}
        <div class="item active">
            <img src="{% static picture %}" style="width:100%;">
        </div>
    {% endfor %}
</div>
...