Django - Отображение данных модели на основе первичного ключа

У меня есть модель из нескольких изображений, и я хочу отображать каждое из них в отдельной карусели Owl при нажатии на изображение, используя первичный ключ в качестве ссылки. У меня все настроено, но по какой-то причине мои изображения не загружаются в карусель. У меня нет плохих отзывов, поэтому если кто-то сможет мне помочь, я буду благодарен.

urls.py:

urlpatterns = [
    # homepage
    path('', views.index, name='index'),

    # get the primary key when an image is clicked
    path('<int:pk>', views.index, name='index_with_pk'),

    # use that primary key to fetch that image's data
    path('carousel/', views.carouselData, name="carousel_data")

]

вызовajax в файле index.html при нажатии на изображение:

$.ajax({
   type: "GET",
   url: '{% url "carousel_data"%}',
   data: { "prime_key": prime_key },
   success: function(data) {
      console.clear();
      console.log("Image object primary key: " + prime_key);
      $(".owl-carousel").owlCarousel({
           items:1,
           loop:true,
           nav:true,
           dots: false,
           autoplay: false,
           autoplayTimeout: 5000,
           smartSpeed: 500,
           autoplayHoverPause: false,
           margin: 20,
           touchDrag: true,
           mouseDrag: false,
           navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
      });
   },
   error: function(data){
      console.log('something went wrong');
   }
})

views.py:

def carouselData(request):

    if request.method == "GET":
        # get the primary key from ajax
        my_key = request.GET.get('prime_key')
        carouselObjects = Portrait.objects.filter(pk=my_key).values(
        'painting_left',
        'painting_right',
        'painting_top',
        'painting_bottom',
        'painting_back'
        )[0]

        carouselContext = {
        'carouselObjects': carouselObjects
        }

        # return the data 
        return render(request, "carousel.html", carouselContext)

carousel.html не получает эти объекты изображений:

{% block carousel_content %}
<!-- left image -->
    <div class="slide slide-4">
        <div class="slide-content">
            <img id="modal-img" src="{{ carouselContext.painting_left.url}}" />
        </div>
    </div>
    <!-- right image -->
    <div class="slide slide5">
        <div class="slide-content">
            <img id="modal-img" src="{{ carouselContext.painting_right.url}}" />
        </div>
    </div>
    <!-- top image -->
    <div class="slide slide5">
        <div class="slide-content">
            <img id="modal-img" src="{{ carouselContext.painting_top.url}}" />
        </div>
    </div>
{% endblock %}

Мое единственное предположение - убедитесь, что у вас есть эти параметры в настройках:

MEDIA_ROOT =  os.path.join(BASE_DIR, 'media') 
MEDIA_URL = '/media/'

А ваши урлы должны быть следующими:

from django.conf.urls.static import static

urlpatterns = [
    # homepage
    path('', views.index, name='index'),

    # get the primary key when an image is clicked
    path('<int:pk>', views.index, name='index_with_pk'),

    # use that primary key to fetch that image's data
    path('carousel/', views.carouselData, name="carousel_data")

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Вернуться на верх