У меня проблема с созданием случайного изображения backgorund с помощью js в моем проекте django?

изображения не появляются, хотя я добавляю правильный каталог, но пост djaong дает этот массаж

в консоли:

GET http://127.0.0.1:8000/%7B%%20static%20bc-3.jpg%20%%7D 404 (Not Found) script.js:24

enter image description here

Моя проблема в том, что я хочу добавить случайное фоновое изображение в мой проект Я установил это в CSS свойство "background-image" и это работает URL, но js код не работает

мой код: index.html

{% extends "kidedu/layout.html" %}
{% load static %}
{% block body %}
    <div class="random_images_container">
        <div class="main_head">
            <h1>Join Our Big Community, To Educate Kids.</h1>
            <h5>Get Start, By sing-in for a new account or log in.</h5>
            <a class="head_btn btn" href="{% url 'sign_up' %}">Join Us</a>
        </div>
        <div class="arrows">
            <i class="fas fa-chevron-left le"></i>
            <i class="fas fa-chevron-right ri"></i>
        </div>
        <ul class="bullets">
            <li></li>
            <li class="active"></li>
            <li></li>
        </ul>
    </div>
{% endblock  %}

js файл

// Image slider
const imageSlider = document.querySelector(".random_images_container")
const imagesArr = ['bc-1.jpg', 'bc-2.jpg', 'bc-3.jpg']

setInterval(() => {
    let randomNumber = Math.floor(Math.random() * imagesArr.length)
    console.log(randomNumber);
    imageSlider.style.backgroundImage = 'url("{% static '+imagesArr[randomNumber]+' %}")'
}, 1000)

url.py

from django.urls import path
from django.urls.resolvers import URLPattern
from . import views

urlpatterns = [
path("", views.index, name="index"),

# User
path("log_in/", views.log_in, name="log_in"),
path("sign_up/", views.register, name="sign_up"),
path("log_out/", views.log_out, name="log_out"),
]

style.css

.random_images_container {
     height: 515px;
     background-size: cover;
     background-image: url("{% static 'images/bc-1.jpg' %}");
     width: 100%;
     background-attachment: fixed;
     background-position: 50%;
     position: relative;
  }
Вернуться на верх